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.
Ohhhh, so this is that whole 'box model' thing in CSS 😜
@enthusefreelancer3440
3 жыл бұрын
:)
@endenman1872
3 жыл бұрын
I was like a noob to css and when i found this channel, I'm like i eat css for breakfast!
@dilanirupasinghe3056
2 жыл бұрын
@@endenman1872 no he eat css for brekfast lol
@walkergms3546
2 жыл бұрын
i rather say 'cube model'
@sebastiangudino9377
2 жыл бұрын
This is the most clever comment ever, you win dude
@KennyCarter90
3 жыл бұрын
I really like the format of this video, it's like two wizards teaching each other their tricks 🧙🏻♂️
@Morrile1
3 жыл бұрын
Mind boggling CSS. Amit is much like Kevin, makes things look so easy whilst encouraging a desire to know more, love it 😎
@sivanandhini9943
2 жыл бұрын
Aaa
@sivanandhini9943
2 жыл бұрын
Aaaaaaaaaaaaaaààaàaààaaàa.
@folkote
Жыл бұрын
Exactly!!!
@remkospaans
3 жыл бұрын
The reverse animation on the ball 😱. I can’t stop 👀 at it.
@MerthanMerter
3 жыл бұрын
like a boss
@frankcastle3288
2 жыл бұрын
I wonder if removing the PRESERVE_3D would've also done the trick?
@naveenramkumar6123
2 жыл бұрын
i dont understand that part at all...why does it have to be reverse?
@abdulsalphan
2 жыл бұрын
@@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.
@abdulsalphan
2 жыл бұрын
@@frankcastle3288 I thought if we could nail the circle from rotating, could do the trick.
@carloseduardoramos9646
2 жыл бұрын
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
3 жыл бұрын
Amit showing the crazy there-is-no-spoon trick on the "ball", Keving smiling "that makes me happy". I love this channel.
@abhyudaytripathi
3 жыл бұрын
I was a Backend Developer, but now after discovering your channel, I now don't hate CSS (at least)
@orcave8802
3 жыл бұрын
Knowing backend without mastering front end is useless atleast for me
@myname-mz3lo
2 жыл бұрын
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
@patfix
2 жыл бұрын
Very relatable.
@connoisseurofcookies2047
2 жыл бұрын
Difficult to create an impressive portfolio with zero front-end, especially if you're a junior dev.
@kelvinsmith4894
3 жыл бұрын
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!😂
@josvelema2362
3 жыл бұрын
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.
@dave6012
3 жыл бұрын
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.
@willjohnson4579
3 жыл бұрын
@@dave6012 oh no, is it time to go to war for browser consistency again?
@dave6012
3 жыл бұрын
@@willjohnson4579 Gondor calls for aid!
@floraposteschild4184
3 жыл бұрын
Note for newbs like me: certain parts of the code shown working INSIDE a block of CSS (e.g. the @keyframes, <a href="#" class="seekto" data-time="1827">30:27</a>), actually work OUTSIDE the enclosing code block. In other words, I put: @keyframes sceneRotate { to {transform: rotateY(360deg);} } outside .scene {}, by itself, and everything worked just fine, though it didn't before. I don't know why.
@Brettin
2 жыл бұрын
I got the same for .left, .right, .top, .bottom {} I had to put it outside of cube to get the four sides to show. The only difference is I am using notepad++
@nitsi9333
2 жыл бұрын
It only worked internally for him cuz they were using scss ("sass"), and not plain css
@xaaxee4033
2 жыл бұрын
@@nitsi9333 Your comment is very attractive!!!! How can I use scss(sass), I am all beginner. My computer is windows10,browser google chrome, editor visual studio code,or codepen.
@edwardholmes91
3 жыл бұрын
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!
@antio1753
3 жыл бұрын
YEAAAAAAAAAAAAHHHHHHHHHH I LOVE 3d with css and KZitem 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 !
@d.l.3807
3 жыл бұрын
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!
@swimmyJones
2 жыл бұрын
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.
@fanzheng1412
2 жыл бұрын
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.
@davidcordero9864
3 жыл бұрын
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!
@bw-dude
3 жыл бұрын
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!
@codaniel
2 жыл бұрын
Very interesting, I love the collaboration.
@nullpointer3860
3 жыл бұрын
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...
@EddyDarell
3 жыл бұрын
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
@RunOs3
3 жыл бұрын
CSS has always been an enigma to me. Amit is awesome and there are few like him out there in the front end world.
@facundocorradini
3 жыл бұрын
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
@sebastianno8
3 жыл бұрын
For somebody who uses FireFox: In my case "perspective" did not work when in "body" (seems to be FireFox bug). To fix this, I used it in "scene" instead.
@danisob3633
3 жыл бұрын
for those in firefox having further trouble with the perspective, you might have to add transform-style: inherit; to the ball and cube (elements that suffer from transform). if this is wrong, even tho it worked for me, correct me. im a noob but i found it on the web
@xiandezeng7388
2 жыл бұрын
You just saved my day
@cavemutt
2 жыл бұрын
I copied the transform and origin from the body into the cube, since the parent needs perspective in order to see translateZ, but I saw DaniSob's transform-style: inherit suggestion, and that works perfectly as well!
@nicholarucitadhamma6000
2 жыл бұрын
@@danisob3633 You are an absolute legend bro😭 Respects to you
@binfuwong8859
2 жыл бұрын
Thank you, wizards!
@ThePete98
3 жыл бұрын
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
@cephasmutua8639
3 жыл бұрын
Wow! Will have to set the 3D somewhere in my site. Thank you for the awesome teaching and thank you for inviting Amit.
@josevaltierra8360
2 жыл бұрын
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; }
@alykane6347
2 жыл бұрын
We're also happy, Kevin! Idid some 3D design with cinema 4D but I couldn't believe it possible with css. Great! Great! Great!
@sldentertainments9842
2 жыл бұрын
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🙏🙏
@MahadyHasan
2 жыл бұрын
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.
@thydevdom
3 жыл бұрын
The counter animation of the ball is badass! I would have never thought to do such a simple thing. lol
@tanakakun6093
3 жыл бұрын
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!
@thecoderabbi
3 жыл бұрын
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!!
@willjohnson4579
3 жыл бұрын
and just like that i have a better grasp of 3D CSS, what an amazing 3D animation lesson, and in just 45 minutes!
@peternicholson26
3 жыл бұрын
Even the simplicity of the chessboard style floor was epicly simple. Genius.
@OrvilleChomer
2 жыл бұрын
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
@Goloso333
3 жыл бұрын
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.
@FrankKynard-yf9yu
Жыл бұрын
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
@dgtlbby
2 жыл бұрын
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!!
@lizaprotas9960
2 жыл бұрын
Now I understand why Wordpress visual editors, like Elementor Pro, CSS Hero, and Divi don’t have an option for laypeople to create 3D effects on images/ texts they’re using on their websites. Developers have to do it manually for each item they test because each one is different. They can’t just pre-program this stuff into a plug-in and expect it to apply easily to anything Wordpress site owners want on their sites. Pre-programming animation or motion effects into a plug-in is WAY easier than pre-programming 3D effects. Very informative video on how 3D effects are created and why plugins just don’t cut it.
@ratias0
3 жыл бұрын
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
@technikhil314
3 жыл бұрын
I will have to watch it at least 3-4 times to understand it fully. Great work.
@technicallokaya6726
3 жыл бұрын
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. 😜
@rakeshpk4991
3 жыл бұрын
Thanks for inviting an amazing artist.
@haythamkenway1561
3 жыл бұрын
oh my goodness ! you did it ! I was waiting for animation and you brought even more , thank you kevin You have my word 🙏❤
@emashno5
3 жыл бұрын
I just love how people are seeing that css and css3 three can produce insane stuff nice work Amit and Kevin
@peerhenry
2 жыл бұрын
Following along I was pulling my hair out why I couldn't get nested faces to work with perspective. The explanation came at <a href="#" class="seekto" data-time="1715">28:35</a>, but then why did it work for you?
@JoeL-zw2me
3 жыл бұрын
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
@dhickey5919
Жыл бұрын
Please note: In CSS3, the @keyframes code of the cube animation: rotation needed to be moved outside the scene { } to work. I just pasted the same code directly below the scene element and it worked perfectly. Good luck.
@AbWischBar
3 жыл бұрын
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.
@burhanahmed8767
2 жыл бұрын
Your Studio lighting is the best, I watched this video on a big screen, & seemed like you were sitting right before me.
@dipanjandeb5245
3 жыл бұрын
Absolutely mind blown!! Take a bow!
@crowebro9581
2 жыл бұрын
Wow! This was amazing to watch and learn. I am eager to try this.
@AsavarKul
2 жыл бұрын
Man, this sorcery classes are top notch
@ir1n3l
2 жыл бұрын
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!
@marianarlt
3 жыл бұрын
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.
@Sqwince23
2 жыл бұрын
poison's ratio for a solid would cause the box to swell horizontally when compressed down. another layer of animation, but the subtle change might make it even more realistic.
@glitchpixels5303
3 жыл бұрын
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
@themightysapien
2 жыл бұрын
Man what did I just watch. DAMN my dude is a beast.
@elvisjames
3 жыл бұрын
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.
@lepsycho3691
3 жыл бұрын
Man that was amazing! Thank you for bringing Amit to show his skills, very inspiring!
@ahmedelmansi6497
3 жыл бұрын
these is the best live chat i have ever seen :D
@PhotographyAdventure
6 ай бұрын
This was so inspirational, amazing walkthrough! 🙏🏼
@mikeynma
3 жыл бұрын
Struggling with Vue atm...this is a welcome distraction :)
@JEsterCW
3 жыл бұрын
Idk how could u even struggle with Vue, its literally the easiest and the best framework and its fast.
@mikeynma
3 жыл бұрын
@@JEsterCW turns out it was a version issue coupled with some npm package updates :)
@stevebob240
2 жыл бұрын
That was awesome, very informative. I'd love to see Amit on again.
@Dexter101x
3 жыл бұрын
I like the reversing of the ball to make it appear as if it were a complete ball
@cazino4
3 жыл бұрын
Its a cool effect. I guess my only reservations related to applying the technique in an actual product (over and above WebGL-based rendering) are: 1)The ball is not really 3d and thus dynamic translation across the other axis (i.e Y,Z) wouldn't work. 2)Not sure if the work required to render the scene would be off-loaded to the GPU as it would be where WebGL is used. That said, its a simple approach to achieve a very good 3d effect. Great video.
@alaaalaff-6252
2 жыл бұрын
Thanks a lot, It's very cool 3d animation with cool and creative codes 😍🥳
@leeeric6292
2 жыл бұрын
I eventually get this done, what I mean is to follow this video and make the animation appear in my computer. Previously I cannot make it because I didn't realize persevered-3d need to be added in the cube class, and it seems this important part didn't show in the first 15 mins, but i eventually found it appeared in the latter section this video. And I think the code editor used in this video is different from a common vs code editor, sometimes you need to separate the code from the class, otherwise error will occur.
@sarabsingh1468
Жыл бұрын
thank you
@maclaurent1147
3 жыл бұрын
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.
@Voughnfox
3 жыл бұрын
AWESOME! Superb talent! thank you Amit Sheen and Kevin Powell.
@mritz579
2 жыл бұрын
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!
@lkc404
2 жыл бұрын
never thought CSS could do that, blown my mind.
@prasathj7436
Жыл бұрын
In just one word, Amazing !!!
@jimiscott
3 жыл бұрын
This is totally amazing! Such a clear demonstration....so many concepts covered. Well done!
@pavanrao2965
3 жыл бұрын
This video is super informative and absolutely stunning !!! ❤️ amazing content 👍 loved the animations especially the reverse animation on the ball 😍
@mansukong
3 жыл бұрын
Is this possible? Wow! That's amazing!
@vin-kry
3 жыл бұрын
Superb! I was scrolling for such animation tutorial and suddenly a notification popped up from this Channel.
@blender_tommy
3 жыл бұрын
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.
@aCitizenJOSerased
3 жыл бұрын
Immense collaboration! Fantastic video. Makes you break down thing in your mind in a lot of new ways.
@astrit
3 жыл бұрын
As always amazing. And this collaboration makes it even more interesting. Keep it up.
@ITGUY-b9u
Жыл бұрын
just to watch this , this is really amazing to watch for fun
@MyUbuntuVids
3 жыл бұрын
Thank you, Kevin and Amit. This was a fantastic tutorial! You've whetted my appetite for CSS animation.
@guntherschabus3458
3 жыл бұрын
awesome guys! Idea, collaboration and deliverable. Really awesome 👍
@ForeignCitizen
3 жыл бұрын
You know Amit is lying every time he says I don't know, he knows exactly. XD
@holo23
3 жыл бұрын
I've literally been binging your videos since I find them so enjoyable
@Viktor920
Жыл бұрын
That was super fun and super useful, thank you!
@ebenmeluifechukwu4298
3 жыл бұрын
Wow!! I now know that I am a total noob in CSS. I need more practice with CSS. I think that I have been neglecting CSS for years now, probably because I do more Native dev stuff. I have got to focus more on Web Technologies !! Thanks for this tutorial. I love it.
@iiREYteoii
Жыл бұрын
I'm really impressed on how he explains, i just know the basic css and understood pretty well 👏
@NewStreamLine
3 жыл бұрын
Guys, your skills are unreal! 😱👍👌 Two days ago I thought CSS was just about fonts. Today? Whole different world. Tomorrow? ???
@8koi245
2 жыл бұрын
This is so cool!!! I'm so glad I decided to work on this
@somebody302
3 жыл бұрын
Amit is a f***ing magician :O i am totally blown away
@NoztrozeR
Жыл бұрын
This was fantastic. I really hope you can get Amit back for some more CSS magic in the future!
@mukeshodhano4094
10 ай бұрын
if you don't see 3d-cube then add this style " transform-style: preserve-3d;" in cube selector it will show in 3d
@jericovalino4976
3 жыл бұрын
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!
@wallacce
3 жыл бұрын
Guys, you absolutely blew my mind. It's awesome! Thanks!
@TheSoulCrisis
2 жыл бұрын
Wow.........raw CSS this is amazing!!
@gireeshmt56
2 жыл бұрын
Thank you so much both!
@shoyofilms
3 жыл бұрын
I didn't know css had "perspective" properties. Great video!
@AdarshSingh-qd6mq
3 жыл бұрын
What a amazing video. I think in this design BOX color is inspired by Kevin's T-shirt color & Ball color comes out From Kevin's Hair ... 😂
Пікірлер: 554