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

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.

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

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

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

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

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.

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

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!😂

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!

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

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!!

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!

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

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

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!

YEAAAAAAAAAAAAHHHHHHHHHH I LOVE 3d with css and KZfaq 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 !

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!

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

It really makes a difference when you find out something this amazing is something you can do yourself. This actually makes me really want to learn webgl stuff, since animation with CSS takes too much CPU. This is a really inspiring video.

I always struggled with CSS as I mostly did back end dev, only working on styling when absolutely necessary and only enough to make things look reasonable, what I called functional not pretty. So inspiring to watch your videos and to get such insight. Fantastic

This is totally amazing! Such a clear demonstration....so many concepts covered. Well done!

This stuff is fascinating and even though I haven't understood most of it because of the actual knowledge of 3D I am still very interested in learning more. Thank you for taking the time in sharing all this information. I am now a new follower of Amit Sheen. Thank you.

Never seen such a great video on CSS and never knew before that we can do so much things with just CSS!!! You guys are out of the world!! Thanks for amazing video🙏🙏

This video is super informative and absolutely stunning !!! ❤️ amazing content 👍 loved the animations especially the reverse animation on the ball 😍

Thank you, Kevin and Amit. This was a fantastic tutorial! You've whetted my appetite for CSS animation.

This was amazing man! That reverse animation on the ball got me. So simple but soooooo effective. Thank you for all your videos. You definitely inspire me to create!

Wow! Will have to set the 3D somewhere in my site. Thank you for the awesome teaching and thank you for inviting Amit.

As always amazing. And this collaboration makes it even more interesting. Keep it up.

Your channel is a godsend. Brought back some inspiration to me, and the clean and concise delivery of the content is EVERYTHING. The thought process to use the knowledge bis what gets me excited Great content. Thanks.

So awesome! funny how your face (and mine) clearly reflected the excitement throughout the vid. I mean, CSS can feel somewhat magical at times, but in this one, Amit had us all amazed as if we were children watching an actual magician

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.

I'm new in the coding world and I can't believe all the free sources and the amount of amazing people sharing what they know, thank you so much Kevin and Amit!!

I have seen a couple of animations like this in css but honestly for most that I tray to understand the code I cannot, but this guy, wow just mind blowing...

Immense collaboration! Fantastic video. Makes you break down thing in your mind in a lot of new ways.

Thank you very much for this video. You both can make people fall in love with CSS. I'd only add an animation to make the ball darker when it bounces against the cube

I've literally been binging your videos since I find them so enjoyable

I will have to watch it at least 3-4 times to understand it fully. Great work.

Thank you for all the videos, you have really made me fall in love with CSS thank you so much and am learning alot. Keep up the gr8t work.

awesome guys! Idea, collaboration and deliverable. Really awesome 👍

I've been doing straight up CSS for about a year now (getting away from Bootstrap when possible) and this video makes me feel like a beginner again lol.

Finally finished doing this, It was actually fun to do. I got a bit of trouble at the start because firefox doesnt support perspective. But switched to Chrome to testing and its working. Thanks for teaching me this!

Amazing, amazing stuff! Thanks so much, both of you! Learned a lot!

CSS has always been an enigma to me. Amit is awesome and there are few like him out there in the front end world.

This was so inspirational, amazing walkthrough! 🙏🏼

I discovered your channel today, and 😮 wow, just blow my mind. I would like to see more of this video of people who work together. This will take me a year to recreate it 😅😅 awesome job, an awesome video awesome awesome awesome work. Love it!

I just saw this. It was amazing! What was really cool is that I actually understood it! I was also encouraged that someone like Amit struggled with using the new CSS color syntax. If HE could struggle with that... helps alleviate some 'imposter syndrome!' Thanks for this video

Guys, you absolutely blew my mind. It's awesome! Thanks!

The counter animation of the ball is badass! I would have never thought to do such a simple thing. lol

Very cool to share this with everyone. Thanks for the effort! Extremely clever way to build a scenery in CSS and excellent attention to detail! I suppose most people know how positioning works, but this really shows how messed up CSS can be: "We give this element position: absolute, because it needs to be relative to the parent". Hahaha.

Wow! This was amazing to watch and learn. I am eager to try this.

I just had this zen moment while watching. You guys are just great!

I am not sure, whether I would use 3D CSS in this way (since I need to go full WebGL for my projects), but ... this is amazing 👍. Just to know that all of this can be done is super valuable. And a lot of the demonstrated techniques will apply to other situations. Just mind blasted again and again by the capabilities of the web render engines.

Insane I'm in love with CSS now Hat's off to the legend Amit Sheen and ton of love for Kevin Powell for sharing this with us

Superb! I was scrolling for such animation tutorial and suddenly a notification popped up from this Channel.

I love CSS and started loving it more after seeing this video, your channel us amazing!

That was awesome, very informative. I'd love to see Amit on again.

That was super fun and super useful, thank you!

AWESOME! Superb talent! thank you Amit Sheen and Kevin Powell.

Your Studio lighting is the best, I watched this video on a big screen, & seemed like you were sitting right before me.

I love your collabs! They're so interesting

I just love how people are seeing that css and css3 three can produce insane stuff nice work Amit and Kevin

This is so cool!!! I'm so glad I decided to work on this

Man am just blown away with the 3d, its really amazing

Thanks for inviting an amazing artist.

This was fantastic. I really hope you can get Amit back for some more CSS magic in the future!

and just like that i have a better grasp of 3D CSS, what an amazing 3D animation lesson, and in just 45 minutes!

Awesome Collaboration! 👍👏 So much new stuff to learn. Thx

Very interesting, I love the collaboration.

I'm so much in to the video that i forgot to comment "first" lol 😂.. This video is one of my favorite from this channel. Hope to see more content like this in the future.. Thanks for this!

This was so awesome. Loved it 😍😍

Thanks both of you for this great video!

Mindblowing experiment! Thanks for sharing this knowledge.

We're also happy, Kevin! Idid some 3D design with cinema 4D but I couldn't believe it possible with css. Great! Great! Great!

You made my day with this video. Thank you!

Is this possible? Wow! That's amazing!

I'm really impressed on how he explains, i just know the basic css and understood pretty well 👏

Absolutely mind blown!! Take a bow!

I just saw this tutorial and I only made a couple of changes to make it fit in the animation, thank you very much for this content, I have always liked animations with css but sometimes it is very difficult for me to understand the language, still I hope that keep it up, greetings from Mexico. I should add that I also use an extension called live Saas Compiler and this will generate the css that you can add to the html.Here I leave the css I hope it helps you :root { --boxColor:#0ff7; --rotateSpeed:30s; --bounceSpeed:2s; } body { background-color: #000; min-height: 100vh; overflow: hidden; display: flex; justify-content: center; align-items: center; font-size: 75px; perspective:10em; perspective-origin: 50% calc(50% - 2.5em); } .scene { position: relative; transform-style: preserve-3d; animation: sceneRotate var(--rotateSpeed) infinite linear ; @keyframes sceneRotate { to {transform: rotateY(360deg); } } } .ball { width: 1em; height: 1em; border-radius: 50%; background: lightblue; position: absolute; left: -.5em; bottom: 1em; background-image: radial-gradient( circle at top, lightblue, #000 ); animation: ballBounce var(--bounceSpeed) infinite ease-out, sceneRotate var(--rotateSpeed) infinite linear reverse; @keyframes ballBounce { 0%,100% {bottom: 0.5em;} 50% {bottom: 3em; animation-timing-function: ease-in;} } } .ballShadow { position: absolute; width: 100%; height: 100%; background-image: radial-gradient( #0007,#0000 50% ); animation: ballShadow var(--bounceSpeed) infinite ease-out; @keyframes ballShadow { 0%,8%,93.5%,100% {transform: scale(1); opacity: 1;} 50% {transform: scale(2); opacity: 0.5; animation-timing-function: ease-in;} } } .cube { width: 2em; height: 2em; transform-style: preserve-3d; position: absolute; bottom: -1em; left: -1em; animation: cubeHeight var(--bounceSpeed) infinite linear; @keyframes cubeHeight { 0%,100% {height: 1.5em;} 8%,93.5%{height: 2em;} } .left,.right,.front,.back{ position: absolute; width: 100%; height: 100%; background: var(--boxColor); box-shadow: 0 0 0.5em #000a inset; } .front{transform: translateZ(1em);} .right{transform: rotateY(90deg) translateZ(1em);} .back{transform: rotateY(180deg) translateZ(1em);} .left{transform: rotateY(270deg) translateZ(1em);} .top{ position: absolute; width: 2em; height: 2em; background: var(--boxColor); transform: translateY(-50%) rotateX(90deg); box-shadow: 0 0 0.5em #000a inset; } .bottom{ position: absolute; width: 2em; height: 2em; background: #0007; bottom: 0; transform: translateY(-50%) rotateX(90deg); box-shadow: 0 0 0.5em #000; } } .floor { position: absolute; top: 1em; transform: translate(-50% , -50%) rotateX(90deg); width: 15em; height: 15em; background-image: radial-gradient(#0000,#000 75%), repeating-conic-gradient(from 45deg, #111 0deg 90deg, #222 90deg 180deg); background-size: 1em 1em; }

Even the simplicity of the chessboard style floor was epicly simple. Genius.

I learned so much 😱 amazing work and great explanations!

Mind Blown..!!! 🤯🤯🤯🤯 Thanks a lot Kevin & Amit..!! Cheers..!!

In just one word, Amazing !!!

Thanks a lot, It's very cool 3d animation with cool and creative codes 😍🥳

So great! Thank you to you both, I learned so much :))

Thank you so much both!

Super cool. Excellent presentation.

So awesome to watch. Makes me smile ;)

OMG and here I am getting to grips with Mixins, Variables and @use...and I see this kind of wizardry, too much to learn so little time :( Still awesome stuff! Thanks you guys (Kevin and Amit) for sharing your knowledge.

Amit is legendary! Thanks for sharing this!!

Incredible!! Thanks for such amazing content, im learning a lot with your videos. Greetings from Argentina

AWESOME! Thank you two.

This is literally mind blowing

Thanks both of you

mind blowing! thank you for all the information! :)

I'm glad to see the full video.

Well that was a journey, I really learned a lot from this oh wow, especially the inset on box shadow

Well, watching this video is like being in a dream. It's so interesting and you keep going on. But when you stop and try to remember the first thing, you almost forgot. 😜

these is the best live chat i have ever seen :D

How beautiful is it! wow. But it is never easy to work, more and more complex than CSS hack. Especially for 3D animation in any platform, you have to think about lots of things, keyframe, timing, lighting, axis, and more. Mr. Amit Sheen did this in a very easy way that we see and behind this effort has many years of experience.