3D CSS - lighting, animations, and more!
HTML-код
- Опубликовано: 25 июл 2024
- 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:
✅ His website: amitsh.com/
✅ Twitter: / amit_sheen
✅ Codepen: codepen.io/amit_sheen
🔗 Links
The CSS Tricks article that Amit mentioned, How CSS Perspective Works: css-tricks.com/how-css-perspe...
⌚ 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
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
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 RUclips channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![Young Nudy - John Wayne (feat. Metro Boomin) [Official Video]](http://i.ytimg.com/vi/NY8HnYYo2fo/mqdefault.jpg)
Ohhhh, so this is that whole 'box model' thing in CSS 😜
:)
I was like a noob to css and when i found this channel, I'm like i eat css for breakfast!
@@endenman1872 no he eat css for brekfast lol
i rather say 'cube model'
This is the most clever comment ever, you win dude
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.
ease-in-quad = cubic-bezier(0.11, 0, 0.5, 0);
ease-out-quad = cubic-bezier(0.5, 1, 0.89, 1);
I really like the format of this video, it's like two wizards teaching each other their tricks 🧙🏻♂️
The reverse animation on the ball 😱. I can’t stop 👀 at it.
like a boss
I wonder if removing the PRESERVE_3D would've also done the trick?
i dont understand that part at all...why does it have to be reverse?
@@naveenramkumar6123 The whole scene rotates at one direction, including the circle, which makes it look as a circle and not a sphere. When you reverse the rotation of the circle alone, it nullifies the rotation it gets from the whole scene.
So, it basically doesn't rotate and gives us an impression that it is a sphere and not a 2D circle.
@@frankcastle3288 I thought if we could nail the circle from rotating, could do the trick.
Mind boggling CSS. Amit is much like Kevin, makes things look so easy whilst encouraging a desire to know more, love it 😎
Aaa
Aaaaaaaaaaaaaaààaàaààaaàa.
Exactly!!!
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)
Knowing backend without mastering front end is useless atleast for me
front end dev can upload a site to cloud services and be ok . backend dev needs front end dev . soon only front end and cloud services will be there
Very relatable.
Difficult to create an impressive portfolio with zero front-end, especially if you're a junior dev.
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!😂
YEAAAAAAAAAAAAHHHHHHHHHH
I LOVE 3d with css and RUclips 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 !
Man that was amazing! Thank you for bringing Amit to show his skills, very inspiring!
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!
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!!
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.
Careful. Safari calculates the Z-axis differently! I had a perfectly working 3d carousel that completely broke. Had to refactor the whole thing to work in safari as well as the other browsers.
@@dave6012 oh no, is it time to go to war for browser consistency again?
@@willjohnson4579 Gondor calls for aid!
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!
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
Wow! Will have to set the 3D somewhere in my site. Thank you for the awesome teaching and thank you for inviting Amit.
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
CSS has always been an enigma to me. Amit is awesome and there are few like him out there in the front end world.
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!
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.
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
This is totally amazing! Such a clear demonstration....so many concepts covered. Well done!
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🙏🙏
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
Even the simplicity of the chessboard style floor was epicly simple. Genius.
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.
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.
Thank you, Kevin and Amit. This was a fantastic tutorial! You've whetted my appetite for CSS animation.
This video is super informative and absolutely stunning !!! ❤️ amazing content 👍 loved the animations especially the reverse animation on the ball 😍
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!
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.
Your Studio lighting is the best, I watched this video on a big screen, & seemed like you were sitting right before me.
Immense collaboration! Fantastic video. Makes you break down thing in your mind in a lot of new ways.
As always amazing. And this collaboration makes it even more interesting. Keep it up.
Thanks for inviting an amazing artist.
I've literally been binging your videos since I find them so enjoyable
The counter animation of the ball is badass! I would have never thought to do such a simple thing. lol
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 will have to watch it at least 3-4 times to understand it fully. Great work.
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.
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
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 👍
Guys, you absolutely blew my mind. It's awesome! Thanks!
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 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!
Man, this sorcery classes are top notch
I just had this zen moment while watching. You guys are just great!
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...
Amazing, amazing stuff! Thanks so much, both of you! Learned a lot!
Superb! I was scrolling for such animation tutorial and suddenly a notification popped up from this Channel.
and just like that i have a better grasp of 3D CSS, what an amazing 3D animation lesson, and in just 45 minutes!
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
This was so inspirational, amazing walkthrough! 🙏🏼
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!
Wow! This was amazing to watch and learn. I am eager to try this.
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
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.
This was fantastic. I really hope you can get Amit back for some more CSS magic in the future!
Awesome Collaboration! 👍👏 So much new stuff to learn. Thx
I love your collabs! They're so interesting
People were talking about the ball this dude made a floor. I was completely mystified at the floor.
The shadowing on the floor just made the whole thing real
Very interesting, I love the collaboration.
Thanks both of you for this great video!
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 😍😍
Man am just blown away with the 3d, its really amazing
You made my day with this video. Thank you!
Thanks a lot, It's very cool 3d animation with cool and creative codes 😍🥳
We're also happy, Kevin! Idid some 3D design with cinema 4D but I couldn't believe it possible with css. Great! Great! Great!
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;
}
Absolutely mind blown!!
Take a bow!
Mind Blown..!!! 🤯🤯🤯🤯 Thanks a lot Kevin & Amit..!! Cheers..!!
Man what did I just watch. DAMN my dude is a beast.
In just one word, Amazing !!!
Is this possible?
Wow! That's amazing!
Mindblowing experiment! Thanks for sharing this knowledge.
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.
So great! Thank you to you both, I learned so much :))
This is literally mind blowing
I learned so much 😱 amazing work and great explanations!
watch 3d room view, built with just html and css
ruclips.net/video/XCLR1JVYQxU/видео.html
full code view:
ruclips.net/video/ILTiZFNmQtc/видео.html
So awesome to watch. Makes me smile ;)
Amit is legendary! Thanks for sharing this!!
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.
I'm really impressed on how he explains, i just know the basic css and understood pretty well 👏
Holy cow this is so cool.
mind blowing! thank you for all the information! :)
AWESOME!
Thank you two.
Super cool. Excellent presentation.
Incredible!! Thanks for such amazing content, im learning a lot with your videos. Greetings from Argentina
Well that was a journey, I really learned a lot from this oh wow, especially the inset on box shadow