Amit Sheen - 3D in CSS, and the True Meaning of Perspective

+++ 3D in CSS, and the True Meaning of Perspective +++ by Amit Sheen +++
Let's take a deep dive into CSS perspective and 3D animation, and learn to harness the power of CSS to add depth to our elements and spice up our design with animated 3D buttons, switches, menus, info cards, interactions, and even text and titles. (May contain some live coding)
-------------------------------------
If you love CSS, have a look at the CSS Café - Online Meetup:
www.meetup.com/de-DE/CSS-Cafe​
/ css__cafe​
// For more CSS tricks and tips visit our blog.
Layout with CSS: 9elements.com/blog/the-devils...
Gradient angels in CSS: 9elements.com/blog/gradient-a...
CSS border radius: 9elements.com/blog/css-border...
+++ About Amit Sheen +++
Amit is an experienced web developer, doing mainly front-end, specializing in CSS, animations, and creative coding. Over the years he's taken part in developing dozens of advanced web/mobile applications from the ground up, and he's always ready for a new challenge. Amit has an entrepreneurial mindset, a pathological curiosity about new technologies, and a constant desire to learn new things.
-------------------------------------
// Follow 9elements for more digital content.
Instagram: / ​
Twitter: / 9elements​
Blog: 9elements.com/blog​
LinkedIn: / 9elements-agency

[@emausdetiquicia6636]

This is a hidden jewel! What a beautiful and clear explanation.

[@sasagasparovic9351]

This should see everybody who is interested in css 3D animation. Very good video

[@julianvelez6563]

Awesome work bro ❤❤

[@manuelvaal1257]

superb job

[@gary-sn4rq]

Please keep this channel going!

[@DmitrySharabin]

Excellent session. Thanks for sharing it! 🙏🏻

[@doriomer]

הי עמית, קודם כל לייק ועכשיו לצפייה בסרטון :)

[@jamesgrubb]

Great explanation, thank you.

[@nataliepitts351]

This is amazing thanks!

[@misterkilluminati6949]

Thank you, sir

[@Dokyto]

thank you

[@muhammedunaise6946]

Thanks Sir Super Class

[@santosndzekos8816]

The best

[@Thommern1]

I had to put perspective on the scene div as well as transform-style: preserve-3d on the box div to make it work, has something changed since the making of this video?

[@9elements]

@amit_sheen

[@trtnec]

39:25, you never told us how you reduced 125 cubes down to 30 divs lol

[@Etomic-Bomb]

Each face of the figure looks like a 2D repeating-linear-gradient. Stack 10 faces on each of the 3 axis.

[@sunflair-wa]

I think I am gonna need more explanation about this method. I don't understand! Plus, I would have thought he used pseudo elements for two additional, and box shadow for two more times those, and filter drop shadow for two more on each element. I did that once for a cube, but that was for the lines that would complete the cube, not for a face.
Tell me more,@@Etomic-Bomb!