3D CSS - lighting, animations, and more!

Having no idea how to do this myself, Amit Sheen was awesome enough to jump in and show me how it's done.

You can find more from Amit Sheen here:

🔗 Links

⌚ Timestamps
00:00 - Introduction
01:21 - Basic Set up
09:04 - Giving the scene perspective
12:28 - Making the cube
22:35 - Making the ball 3D and adding the shadow
27:56 - Rotating the scene
31:34 - Making the ball bounce
37:06 - Making the cube squish as the ball lands on it

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[zachjensz]

Ohhhh, so this is that whole 'box model' thing in CSS 😜

[sadhlife]

Little tip: In physics class we're taught that the equation for the distance traveled by a falling ball is a quadratic equation. Which is why making the timing functions ease-in-quad and ease-out-quad would actually make it even more realistic feeling.

[KennyCarter]

I really like the format of this video, it's like two wizards teaching each other their tricks 🧙🏻‍♂️

[Morrile]

Mind boggling CSS. Amit is much like Kevin, makes things look so easy whilst encouraging a desire to know more, love it 😎

[remkospaans]

The reverse animation on the ball 😱. I can’t stop 👀 at it.

[carloseduardoramos]

I started my studies in CSS a month ago. My mind blowed just now, because all that i've heard untill yesterday was something like "CSS is for styles, and JS for add actions". Now im being introduced for a huge new world, full of possibilitys... the animations. Thank u guys for this pleasant start.

[pablowbk]

Amit showing the crazy there-is-no-spoon trick on the "ball", Keving smiling "that makes me happy". I love this channel.

[abhyudaytripathi]

I was a Backend Developer, but now after discovering your channel, I now don't hate CSS (at least)

[kelvinsmith]

Lol at that when he tricked my perspective of the ball with reverse rotation!
This guy a legend! Shows he thinks rather than just code!😂

[davidcordero]

Next level CSS. Kevin you looked inspired man! Can't wait to see where you take this, thanks for this fantastic video. Amit showed what a pro he is and a great teacher, bravo!

[thecoderabbi]

This is so so so amazing! Thanks so much Kevin. I love the fact that you featured this 3D-CSS wizard, Love your enthusiasm in wanting to learn something new. Love that you're so much concerned about making CSS so much easier than it seem. I can't wait to see how easier you can make this to be when applying it to real web pages!!

[bw-dude]

Hey Kevin, I watched a lot of your videos and learned something in each of them. But this one was a class of its own, absolutely mindboggling what Amit was doing. I could tell you felt the same way sometimes. Thank you!

[antio]

I LOVE 3d with css and Youtube has not enough video (or well structured) about it...
PLEASE Kevin make a series for 3d with Css and of course with libraries like 3js....
I am SURE that people would love them...especially with YOUR teaching style
-With love, one of your students !

[EddyDarell]

This tutorial is actually amazing. The ball animation and shadow tricks are just so simple yet yield so good results that I'm actually blown away. I'd have never thought of that. Thank you

[josvelema]

That trick with the alpha on a hex value blew my mind ! Also this 3DCSS is not that hard to understand, it's really intuitive.

[lepsycho]

Man that was amazing! Thank you for bringing Amit to show his skills, very inspiring!

[d.l.]

Just incredible. 50% of the video was just learning new stuff and I would say, I know quite something about CSS. Thanks for your tutorial!

[edwardholmes]

Wow, that's incredible, I never knew you could create such realistic effects using CSS. Amit's teaching style and way of explaining important concepts is fantastic. He's right, light and shade play such an important role in making things look realistic. I'm in awe, my CSS is very much armature by comparison but it's great to see what's possible!

[haythamkenway]

oh my goodness ! you did it ! I was waiting for animation and you brought even more, thank you kevin You have my word 🙏❤

[JoeL-zwme]

Really cool to see how something like this is made. Like you said not as complex as you’d think but just knowing how and what to do to accomplish it is the impressive part