Amazing 3D CSS creations from my community

a little while ago i challenged my audience that's you guys to create some 3d css stuff it was whatever you wanted submit it and i would explore what you all submitted in a video and i know it's taken a little while but this video is finally here i do really apologize for the delay but the video is here and just to say the submissions range from people who are doing this this is their first time trying to create something in 3d and there's other people that there's anna tudor there's jay and a whole bunch of others that have lots of experience doing all of this but despite that even the people where it's their first attempt at creating something they're just mind-blowing submission after mind-blowing submission there's a lot of cubes but there's all these different takes on cubes and different takes on a lot of these things that we see coming up so i know it's a long video there's a lot of submissions to look at but honestly everybody who submitted something should be really really proud because they're all super super impressive so let's go and take a look at what they are all righty so we're gonna be diving in and one of the things i just want to say as we get into this there's lots of them coming so i won't be spending too much time on any given one but let's go see what this one is about because i don't even know where the 3d comes but i'm guessing click to interact and there we go we had a nice little section that oh look at this we can actually go that's so cool that's fun and i like here we can even see um we can go through and look at that that's super cool uh i wonder if i can close it oh we can we can close it back down and so this one is by emmanuel steve p cowas so thank you very much for that emanuel let's go on to the next one this one is by sandeep and i think i got some inspiration from the 3d tutorial i did with amachine a little while back so nice job on that one very cool uh next up we have this slideism and this one is by romaine leblanc and here we get this nice we can obviously download something i'm not about to do that but we can see this um calendar not a calendar oh it looks like one of those games maybe it's one of those games where you can like slide stuff around to try and get things in the right place and we can see that it is in 3d right there so that's really really cool next up we have a cool 3d spinning clock thing and this one is over there by um darwid krajjuski and i'm really sorry if i say anybody's name wrong i really do apologize for that and look no javascript going on that's all with uh css so really cool i like the really nice job on that one i like like the animation that's happening where you can sort of see it's like it wants to click over it's not there it's not there and then it goes that's a really nice sort of timing function or whatever is on there really nice and i guess it would just keep going so you can see um you know the six is slowly i saw it move a little bit there so i'm not going to wait for the next tick but very cool i like that a lot this next one here is by francisco pedroso and oh my goodness i didn't know what would happen it looked like maybe i could interact that's super cool mouse hub mouse hover to animate ah that's so nice very cool i'm impressed and then it goes back the other way very good job francisco uh i like also them i think for something like this because there's so much to it there's a lot of complexity having this depth of field with it going like fading away is really really important or else it would just be too busy but we get that sense of depth and everything with it as well which is really neat the next one wrong shortcut let's go to the next tab is this one here by robin la minchan where oh there we go i was wondering how this worked but there we go i can click and drag and it responds to the viewport and let me just make that a little bit bigger there we go so you can click and drag and get this nice little 3d plane going like that i do want to say also as i'm going through these if you submitted one and i don't cover it there were a few urls that were broken i tried to see if there was like a spelling mistake or something to fix it and if but just if i don't get tears or i skipped yours don't feel bad i'm trying to cover them all but there was something wrong with the url um next one up hi kevin check it out 3d layer effect who is this one by this one is by uh ranch and huda so let's check this one out and oh that's cool i like that i love these things that you can deconstruct like that that's just yeah that's my i love things like that i find it so cool and you can see that this it's nice very good job ranch it nice job this next one is by nick ollier and very cool we can see a nice cool spinning house there a little rough but i think for the thing with this just like anything like this it's more 3dness than i've done um so even if it's a little rougher on the edges that's really really cool and all these people like kevin you're the king of css like look at these amazing things that you guys created really good stuff there nick this next one is by sasha oh my goodness i like to have the loop there where it just sort of explodes into us i'm going to go to the next one but sasha van den windgret that's a really cute bunny really really cool i like it um all right so next we get this oh and this is another one by sasha so this one's let's check it out oh oh that's that's nice that's a cool little toggle right there and look at even the shadow sort of like pulls out a little further oh i wasn't exp i wasn't sure what to expect on that but that that's really satisfying very satisfying nice stuff sasha cool so the next one up is poly pain so this is by killian and we have this 3d effect going on right here if you don't know about poly paint check it out it's a cool product but he's brought in on the website a few different 3d ish things where when you hover you get like a little simple 3d sort of movement that comes onto these so you can see a nice little shift there so showing how we could actually use some 3d in production sites where sometimes maybe these all out things might seem like a little bit much and i always get questions about why not just use svgs or other things for some of this stuff and i care for sure but like we like pushing the limits and doing stuff we can bring these nice little subtle effects into things sometimes uh just like that so there's poly pain and let's head on to the next one and this one is by burton media and burton media i think jesse burton so here's jesse's where we get this sort of cool 3dish card coming up a little star star ratings and different things and the blur effect you can see as i go left and right it sort of moves around which is always fun these ones where you can sort of move stuff a little bit and again this is very similar to what we just saw with killian where it's a bit more of a subtle effect but often the more subtle effects i think work really well so very cool there um by jesse burton let's go see the next one which is a windmill and i've zoomed in so let's zoom back out so we can see oh and it's spin see that's always cool when you get like the first thing it's already 3d i like that there's like transparency to it um just so with the transparency you can sort of see more of the 3dness and again no javascript in here which is always fun but then the little spinning touch on top of it is always super nice and cool so there we go very nice and that one is by we had jesse it's by i'm going to say your name wrong i apologize mad [Music] um but yeah really cool i like it a lot let's head on to the next one which uh oh yeah i remember this so this one is by um tobias congetter and when i when i first thought i was like oh i don't know it's 3d but look at this it's like it's for previewing products in 3d and you can drag and move it around you can zoom in a bit you can flip it over and get front you can get the back if it's closed oh that's that's oh that's nice um i like things like that closed folds up on us let's zoom back out a little open and you see it all fold back out go back to the front so cool and again once again bringing something into production in a production site where it's sort of showing showing off how the project works a little bit and getting it in real time which is obviously really cool so that's a nice one right there thank you very much for showing that off and next up we have three by gunthem so here we have a lemon a very uh lemon what happened oh i think i can click i see a hand oh that you know what i mean i love that 3d effect but just even the color change is really well done that's a nice little transition on that um that's happening at the same time very that these things are just so satisfying aren't they um we have three here so here's another one oh there's more of it an open so this one's a little bit more aggressive and how it's happening in terms of the movement and everything but very cool i like again here it's kind of fun like you're exposing more information which is always cool so number two by gunthem jane and the third one generate blocks so what does that oh look at that and then oh this is satisfying because they don't just pop into place they pop into place and then have that little bounce that comes with it uh that's really neat really cool three very good submissions and if some people only submitted one and you didn't know you could submit more than one i do apologize multiple people asked me if they could do multiple submissions and i said no problem which is one of the reasons we have so many um yes this one is a 3d dice game made purely in css so i'm not really going to dive too far into it but i think this is really really cool and this one is by itae and let's just see if we can do we'll throw kevin in play let's just see what we get here but purely with css let's go with my what this blue color here maybe join game i hope i'm not playing with real people but i haven't roll the dice so if that's like css that's doing the the rolling of the dice it looks like it's a spots because they're moving quite quickly so that's good i'm going to abandon the game in a second and i don't want to leave anyone behind but yeah really really cool i like that a lot do i get another turn i want one more turn here this guy keeps getting extra turns ah here we go yeah nice just super cool there oh oh it's like i should have figured it was like monopoly when i looked at it awesome super cool next up we have this one by dinesh and dinesh is made this cool 3d cube semi-transparent again i like the transparentness because it just shows off that we really do have that depth and we're getting all these different pictures different ways of rotating around which is fun instead of just being the standard way so nice little touch there very cool uh this one is by arthur arthur cutler's and we get some 3d text and this is i'm assuming using the same method that um amit once again showed us for 3d text but i like this because it's an extra twist on it right uh we get the spin but it's at an angle the angle that it's at is actually changing so i love that you took something that we covered in a tutorial but you've stepped it up to like the next level of getting the whole thing to move as well as spin really awesome so cool stuff there arthur and yeah i hope you had a lot of fun building it and this one is by remzy mustafa it looks really cool and i figured the book would be the 3d part and look at that very very cool i mean just the overall look and everything the texture on that book is really really nice and then you get that nice effect oh and i didn't realize it at first oh you got a lot of these types of effects but here with the shadow coming with the book opening it gives that that extra little dimension which is really really cool it's almost like the light source is the the flame there almost uh but you get the idea we have like a natural light source that's coming on that and it works super well that shadow's impressive um because yeah that just adds that extra touch of realism with the 3d whenever we can get light sources which are super hard to do with css only because yeah super cool good job ramsay nice next up look at this who's this one by professor eight who is professor eight uh this is oleg and just madness of cubes going on here we have another one from oleg so we'll go see which what the next one is but i'm just like spinning them it's following my mouse movement so if i go i think i sort of felt like i tossed it yeah we can speed them up we can slow them down and this next one is also by oleg like i mentioned and here we get spinning cubes when we hover on any specific one so finally just all these different ways of doing different things with cubes and they're all super satisfying to watch i don't know i love it uh this next one some hover effects these hover effects are by timani so to many i keep looking i have my google sheet off to the side but a lot of these you know a lot of people here are putting these in so hover me oh fun fun that's so cool and we get little delays on it going on as well little different movements happening super cool super fun these are this is like one of those like really pleasant things if you could find a way that would work in a production site um where you get like it would have to fit with the vibe and the feeling of everything um but i think it'd be really cool and without pseudo-elements that's interesting i wonder if it's done with box shadows or something i'm not going to dive in um maybe with gradients i'm not even sure i would i wouldn't mind diving in at one point but really really cool i like the delayed animations on some of these so it's like an extra little bonus surprise um when you're not expecting it you think it's a regular hover until it surprises you which is really cool next up we have two by lucas this is the first one where you get these 3d items that you can pop out at you by hovering on top when they're in this 3d space which is cool i like that a lot and we have two from lucas here so here's the second one and here yeah this is a bit more subtle right where we get the sort of the mouse movement along with it in this 3d space and actually a nice little touch here is with the arm going through that even though i guess that's all just an image it adds to that 3d depthness of everything because his arm's going through it and it looks like it's a carousel there we go get different carousel things happening all using that same 3d space very cool nice stuff lucas here i'm guessing this is by david irvin we have this floating effect right there let's see if we have something else on the page take a look at my work we have a carousel is it oh look at there we go that's cool that's fun i like that it's a nice way just to not like get away from a standard carousel um and have something a little bit more interesting cool very nice this is also by david and you can see we got a lot of cubes going on spinning with different backgrounds and stuff very cool cubes are spinning cubes are never gonna get tiring love it uh here we have some more 3d text oh and a hover effect on it look at that this one is by david kenny and we get so the spinning text effect we get that nice sort of like um the whiteness in the back that just gives it the perspective and you get this fun thing going on right there very cool up next we have this one i'm gonna let that i'm already i already like it uh this one's by damien nawaz nowaki no i think it's no wacky modern modernity very nice bonus points right there for selectable text on all of this uh damien very cool nice stuff so that's by again damien nowaki and next up we have cooper run neon and so let's check that one out and we get another cube which what's it say that i see something oh hello world over there so we get the 3d text on that is cool so a bit of 3d text on there as it spins around a nice shadow effect on the ground the shadow is moving with the cube which is hard to do so very very awesome you have that and again the shadows super hard but they always help give just that extra touch of realism now i'm wondering if there is a shadow or if my eyes are just if the shadow's actually animated or not or if it's my eyes that are just bugging out on me but either way i think it looks really good uh so nice stuff on that one cooper all right so next we have this one which is another clock but very different from that previous one we had where you can see the time ticking away and with a nice little 3d effect to drop those down i forget the name of those types of things but that this one is by antonio perricconi one of those two so very nice things there nice it's a very nice clock there antonio i like it a lot oh look at this this one is by caleb tiats and it gives me a lot of reminders of um amachine's style so i'm guessing you learned a few things from him just with the rotating thing the checkerboard pattern that shows us the rotating scene and stuff uh but it's a little bit like the bouncing cube we did but taken to level 100 here um getting that ball to bounce between two cubes still having the cubes smush uh yeah that's really really cool good stuff um caleb this is like a screen saver style thing right you could just have that running and you wouldn't mind remember screensavers i haven't had a screensaver on my computer forever do people still have screen savers i don't even know uh another rubik's cube this rubik's cube and it looks like it's interactive so we're going to check that out i just want to see who it's by this one is by script raccoon so thank you very much and we had movement how did i do that if i click it definitely moves look at that oh look i'm clicking dragging aha i can choose which direction there we go i was and i guess if you just click it just chooses what to do i'm not sure but super cool i love it all right up next we have oh this what's that game called there was a game that had levels like that this one is by antonio trefiro and yeah i love it if i click i was just curious if i could click on them to see if something would happen but very nice i love it it's just the color is also super super nice um and the fading effect to make it work and it just adds that perspective to everything very nice touch i really like it so good stuff antonio thank you for submitting that and that is the last of this set of tabs but oh my goodness look at this we got a lot more to go oh we got a triangle our first 3d triangle so this is by bob and yeah some 3d some 3d shapes going on here that can rotate between their different sides and very cool nice to see a different shape other than a cube and looks very interesting and cool so yeah i'm happy we got some pyramids or this one's a pyramid i guess and i'm not sure what shape that is other than triangular prism i guess maybe i don't even know uh but nice seeing a different shape attempted and i think that's a nice a nice little exploration of different ways of doing it it's even i i think i'm actually a lot harder to do triangle than it would be to do a cube so i'm curious about that one very cool um next up we have this one by michael c and it's a nice oh and the door closes you never know what oh how do we open the door it looked like it was about to open i'm not sure how we can open the door again let's refresh that one i want the door open and to see that close again i'm not going to dive into it but very interesting i guess it's way the way the animation is set up so it's only forwards maybe and then it's only on hover so it actually could stop at where it left off uh here we have a oh that's a nice little effect that could be used for some fun stuff oh i really like that that's by suleiman codes and we have another one from solomon coming up after that so that one's really fun and cool and here's a solomon you're 12 years old man i was definitely not doing stuff like this when i was 12. and the one that you're hovering on also gets a nice little border radius on there too so a rotating exploding cube with interesting little hover effects it's like a very cool i like it a lot good job sullivan i'm i'm impressed oh i remember i opened this one i was like oh this is interesting but um and i double checked to make sure it was something interesting but this is really cool so we're going to dive in this is this one is by got gauche um so let's just do my new project because i'm the most unoriginal person at naming things and we're going to start here we're going to do something really fast let's choose this this is going to be my floor so we're going to do that i guess we'll do a corner just so we can actually have a corner uh so that's going like that then let's if we're going to set our faces now so let's put brick yeah okay and then brick here uh we'll do whoop i don't want to edit it i can edit oh i can edit cool i didn't even know that i want to do this side with those ones just so we have something different happening now we need this wall uh we'll put this brick one so it's different once again and then let's choose this wall over on this side set all of that up so this is all setting everything up into place which is fun but then preview and look at this we get to like walk around it's wolfenstein and we oh we even have a little mini map i didn't realize that when i played with it last time yeah back to my wolfenstein day is really cool uh you can save your world and just i'm i'm impressed by that one so again that's by got got t this is by gareth hayes and oh this reminds me a little when okay can i'm just going to click i'm not going to learn the shortcuts okay i was curious if i could click and drag to look at this these 3d worlds that people can build in the browser like this oh and then we can push that to stop interesting and then we can move i can keep turning i'd like it if the turning animation was a little bit faster just because i feel like it's we're getting a little slowed down by stuff but it doesn't matter because it's oh can i open that door i can let's go through the door and we get links tool talks well look at that that's uh stop let's just click on tools and see what happens and then we go to another page and look at that oh i have an ad because we won't watch the ad for the whatever this is um but yeah definitely really really cool uh i'm impressed by that one and here we get a hotel building plan this one uh that last was gareth so this one's by emmanuel uh room available oh so we get like the different floors and we can see how the floors are stacked and then we can select the room that we want can i select multiple rooms ooh i can so if i want to book those rooms you can know if you're getting rooms next to somebody else or something like that you can see where the stairs are because you don't want to book the room next to the stairs so it's quieter or the elevators especially uh yeah that's fun that's really cool and it gives it that little 3d perspective maybe a little bit more on the shadow or something you don't want it overlapping though because you get more of a sense of 3d if there was a bit of overlap on them but then it would make it less usable so usability is obviously the most important that's really awesome and next up we have a whole bunch from ricardo this is ricardo olivia alonso oh i love these isometric things oh it moves to super nice really really cool i'm guessing we're gonna have a few so i'm gonna go through these pretty fast ricardo just because we do have a bunch of submissions we have mario on the tv too look at the lighting even like the the pad here is lighting up just like the general lighting even on the floor and stuff like that though like ignoring the tv um and even just a little bit of extra outside the scene really really really cool and this one's only with html really really nice there we go another one over here we have a little bit i'm always curious when i see these just because i know some of them had so we do have some javascript on this one here which is fine i don't mind i said that you could um but just a little these isometric things and it's just the javascript's just helping us get like the movement right um like this so really really cool next one up from ricardo as well we have this bedroom scene right here these yeah i love these the the style of these the look like look at the lighting coming through the window uh and even with the shadow from the couch and everything like super super cool i love it and the last one i think from ricardo it even has sound i'm not gonna put my sound on but it even has sound can we close it and open it i wasn't sure or if i do this would it i had i was like it looks like we could actually start it we can definitely start it and music starts playing and you can turn it off ricardo you're up to some real magic here so good stuff i'm impressed here is one by alvaro montouro with a nice little is it a gazebo it is a gazebo um a 3d gazebo css only very very cool nice little close-up spin by there that must have taken a long time to make that's all i'm going to say for that one oh and here we got those like triangle shapes up here too um that i mentioned before we can start and stop that oh and look we got some hide and show textures as well interesting i mean stop the animation and here's a duracell battery also by alvaro and spinning around we got all the different looks and it's basically a cube we have the text but we have to build these little knobby things here at the top too uh and all that so there's a lot going on here i'm yeah you guys are you guys are all magicians this is incredible here is one where actually this looks a little familiar i think we know it this is actually um from a similar one so i'm guessing catan uh that is by katan exactly and if i look at that going around like that uh this room i did a tutorial similar to this but this sort of takes the step to the next level where i looked at how to do this card um effect but here we have the little fireworks going for the diwali which is really cool and those fireworks fireworks are super cute uh so that's really nice and then here at this other side just that um anim you know the gradient text that has that nice little animation everything all the bright colors for diwali and stuff a nice little effect that goes on with that and i love the 3d text thing like that it's super cool nice here we have this of flip the coin by kareem cream cream when you click you get a nice little satisfying flip of a coin awesome so cool so fun i love that and just that that animation at the end really makes it a lot more satisfying where you get that little poof so you know it hit because especially we're not in like a 3d realm or just on this gray floaty surface so it just stopped you would get the idea but because you get that animation that goes with it it gives it that feeling of a little bit of an impact so it just brings home that okay we've hit the ground now so a nice little touch there that i think adds a lot of extra realism to it this one by zenith20 programmer and do i have a name for zenith i don't have a name for zenith we just have that is your name zenith20 is your name we get this nice cool 3d cube they have their own youtube channel awesome they're 14 years old making stuff like this mini portfolio the only thing i would say if uh i mean i think it's really really awesome if there was a way to pause the animation just so i could get you know make it a little bit easier to interact with it or to like oh i want to read what it says here or like i missed the link and i have to wait for the whole thing to come around again so if there was and maybe i'm missing it but if there was a way to pause the animation it would just make it a lot easier for people to sort of pause they can read it hit play again but very fun or if you know you wanted to bring in some javascript then being able to interact with it a little more could be really really cool but it's already it's a really fun take on the cube that i've never seen before giving different information like this for like a little mini portfolio so it's pretty fun did you see that did that just assemble itself who's this by this is my adam kuhn um so i'm going to refresh that because i really do think it assembled itself was it just something weird i refresh now and it's definitely not assembling itself i'll see when i'm editing this if what happened happened there but look at this we have animated text on the side here we have the menu it says i can click what happens if we zoom in if we click and like there's no it's zoomed out on its own there's lots of keyframes in here i'm guessing because we have no javascript going on um just the movement to give it the speed and everything and the camera moving a little bit the whole time the flapping of this uh atom like super super cool i love it really really really awesome what are you looking for this is by sanmeet um yeah a bouncing eyeball it says 3di and it's a 3di i like that it's bouncing but it's not just bouncing you have the squishiness they have it looking around and just that the the lighting that is on there looks really really good so awesome a little creepy but pretty awesome queen nice who's this by uh this one is by [Music] mandeep and oh there we go we get if we go we hover we get the effect uh going and then we come off so a nice little 3d effect there to make a little ipod-ish and this is by brizzler dev and we got this nice little stacking logos nice little stacking effect it makes me think of that other one that we saw before that would it was it wasn't rotating but it sort of would come out and go back in um on hover but a nice little stacking spinning effect there with the it also looks a little bit nicer with the rounded corners on it um rather than just being the square it just makes it look like oh it's not just a div that you flattened it actually gives it a little something else and the different colors to obviously help with that really cool so good stuff brizzler and next up we have benjamin and this is benjamin there's no javascript on this page this binary 3d calculator can add two binary numbers and display the result in binary without javascript logic is pure html i'm impressed i don't know binary at all but let's just throw some random stuff in here and see what happens that plus that gives us that uh in decimal and hexadecimal so i like again a nice cool interesting use of 3d cubes it's also really cool that the cubes are all in perspective with each other so it's sort of like we're looking in the middle and they're they're bending outwards on both directions that's really fun uh the spinning effect i was trying to click this and like it's not working that's our result so yeah a nice little spin effect there that works really well and there's no javascript for any of it which i'm curious about how you do to do that but obviously it's possible i'm just curious about the results i guess it's all just conditional based on what's selected and there's a way and then because let's just look at the result and the results are like spinning so it must be like there's all different divs placed that have all potential numbers and then yeah i don't want to know the logic behind that but very nice job on it i'm impressed here we have a really cool effect i want to watch it before i see who it's done by i love these things that's so satisfying this is by trenton stetson very cool stuff trend i love it i could just it's mesmerizing watching something like that and that the lag behind the animation is just really satisfying really really cool and then we got another cube and i knew we'd have a lot of cubes but another take on the cube with some interesting colors on there actually um this one is by the captain waffles my oldest son would be very happy i had my his favorite food is waffles and i think you've been on my twitch streams previously i could be wrong on that but i think i remember the name so very nice on that one we have a scroll down this one's by s s sidjar and i said your name wrong and i apologize so we can scroll down look at that keep on scrolling down or i can scroll up so we have some scroll position with a spinning cube in the middle and that cube in the middle is like locked in the scene of this bigger cube so yeah that's cool we're getting like the cube is spinning on its own axis but it's locked to this axis that i can then spin around this is really really cool and so next up here we have this one this one is by dreamwriter and dreamwriter see it in use on another page um but we get the idea here read more when we get these all the different things you get again another cube that has like information showing on it and that you can then click read more and get more information so i would say well let's go see how it actually is being used in use i'm just curious so here we can see it there so the one issue is if somebody wants to read more on that one and then it's gone they have to wait for it to come all the way back around so just be careful with things like that just to make sure that like you're not making it much harder from a usability standpoint um so if you had a little like control they could then like click just like if you missed the one you wanted that you could easily get to it um quickly it could be an extra little like bonus feature just to make it a lot more usable but a very cool effect there and i like that you like we know there's more coming because it's see-through and we can see that there's more on the way now the username here is john doe um so i don't know if they want me saying their real name so i'm not going to say it we'll just stick with john doe and so we get it's a happy to thought to har i haven't heard of tahar before from nepal super cool nice little effect there and i sort of like that it moves over a little bit as it opens so it stays centered so thank you very much for that very nice well look at this at the umbrella corporation very nice got some resident evil fan fans and this one's by gore and it's fun that we you know it's doing the spin this way but we're also slowly rotating that way love it uh happy halloween this is probably because when i asked for this it was very close to halloween we are very behind we have videos but it looks like videos playing on each side or it's either a gif or a video and i think it's the same one on all of them very nice very halloweeny especially with the glow there as well a nice little use of 3d cubes when i tried to group ones by um person but my google sheet didn't didn't do it on this time so this is another one by trenton stetson that we had another submission from before so very cool thank you for that a house we can use the arrow keys to rotate look at that let's do it that way a little bit and then let's rotate this way we have a roof on one side but then we can see in the house let's see if i can once we're off access this way there we go we can see inside the house now super cool this one is by mike brian thank you very much for that mike it'd be nice if we could also do it with the keyboard with the mouse since we're using javascript in there anyway then nice little way you could try and take that to level up and explore a little bit more but even seeing through the windows is also very cool um that's a nice just little touch we can do there because you can just have like the window that's just like a white div basically so we can't see inside and we have to rotate around so very cool we have the windows there but that are also see-through next up we have this one this one is by akash saudia open me css is awesome and then and css is fun css is easy with kevin thank you very much for that and css is beautiful nice little gradient animation in the background too i'm just curious like say i'm assuming it's going to start again or do we get to the end oh and now we're rotating back the other way aha and then if i do that and then it's going to go that way so when it's closed it rotates one way when it's open it rotates the other way very nice and that's a nice little surprise too you're expecting we've seen a lot of cubes again you can just do so many different things with cubes so a nice little like reveal there that you wouldn't necessarily be expecting so very nice and very cool and next up this one is by sawan jia um i apologize is this this we have a slider but you know what it isn't it's like um a range slider type of thing but in 3d maybe i was zoomed in when i opened this before i could have sworn that the angle on it was different but still a nice little fun 3d range slider right there and it is just a range slider we can get that in a 3d landscape which is fun here we have books for everyone and books for everyone is by david let's go and see and there we go and this is fun because it sort of goes with that we have a nice little shadow effect on that one too um it goes well with the book theme of like we want more information on the book and it's actually opening us to show us the information on the book and we can favorite them and this next one's also by david and he said that it's made to learn not to wow so let's see what that one is and we have a little popping effects that can come off on that very cool there's nothing wrong with making projects just to learn not to wow all right very cool let's go on to the next one so thank you for the two submissions david however to see a visualized box model ooh i'm interested in this this one's by evan and we get all the different pieces that's really cool again i i we had one of these a lot earlier on it was a sucker for it it sort of just broke apart um so here again i like that you get the stacking of everything coming up um and then with it stacked we're also getting like a description of what each part in the box model is so a nice little fun way to visualize that very cool evan and we have another one from evan here and get the nice little spinning spinning effect here what i'm just here oh are they links i'm not even let's just click can i click we're also in a codepen no i can't click they do look like they could be potentially links but nice little 3d effect there with this like 3d plane i saw it going around i wasn't sure but it's like 3d divs this way that the pieces are connected to so you can sort of see the carouselly things that they're attached to welcome to my css animation playground this is by bjorn b use the arrows to navigate on oh there we go let me turn the lights on love it let's go to the next one blurred background effect very cool oh it's cool it's the back outside of the box the outside of the box is blurred if you're hovering on the inside reload for a new picture ah there's the 3d i knew we were going to get to one so i was going to cycle through them a fun little 3d effect there like um those what are they called there's the boats that have the big things in the back the ferry boats that in the old days that had those big propeller things that would turn to move them around very cool dropping grid you got our snake effect there just because it's looping all the way around very nice fun little portfolio i like when everything's like completely different from one another um and it's just sort of like different little pleasant surprises as we go through i think i'm gonna stop there oh we did i'm happy i kept going so we got another 3d another 3d one this would be the last one i look at on here so the ball bounces and then it bounces away and that's cool and then the next one's going to eventually bounce and bounce away from us or go that way very cool so again i love this this is the lesson that i did with emmett but taken to the next level so you learned how to do it you got a cool like a really cool pattern on the ground there but then also looking at a different technique or a different thing you could do with the animation to try and step your game up even more so really really awesome here's a 3d lighthouse by adir sl we have another one from a deer coming up as well in a second and very nice 3d lighthouse and oh i opened the same one twice so there's the we just have the two uh the two versions of it i think yeah like the regular code pen and then the preview so very cool idea i like it a lot lighthouses always look cool you'd slow the spin down a little bit just make it a little bit more subtle let us relax while we look at the lighthouse i think i'd like that um right now i feel like if i was on that i'd be getting nauseous you know um but yeah i mean it looks really good awesome stuff here by pete barr and i have a whole bunch from pete barr coming up and and we're including them all because look at that isn't that nice i like the about loading in animation very cool it is using gsap for the animations here um but and gsap is is great if you want to get into more advanced animations like gsap makes a lot more sense than doing everything um css only so there's the first one by pete um we got another one here lemon heads oh look there i was like where's the 3d and then all of a sudden the 3d came in there and gave us that little that little pleasant rotating surprise super cool i love the aesthetic of this one that looks really good another one by pete here uh css kinetic type poster just read that the shadowy on on everything there really makes it hammer home and be able to work very nice really cool and another one by pete i believe yes here's some cards coming out look at that the cool club nice and we have another one from pete we do some oh that's satisfying walking things like that are fun look at those guys go and even with the reflection on the ground and stuff very very cool again like this would be fun to see even without that reflection but by having the reflection there just because it is just a white canvas effectively um it looks like there's a bit of lighting on it but having that reflection there just really helps say that this is where the ground is so how you know that that always helps in and another one by pete oh my goodness gsap is amazing very awesome and another one by pete i said we had a lot coming so here's a nice little sort of like a loading animation cube stripe loader exactly we have a 3d little cube loading animation very very nice very aesthetically pleasing all the colors and everything used and all of these ones from pete are just really nice the aesthetics of all of it um of all of these are really really pleasant and very nice and and very different here's another this one's also by pete and it's another just really cool the aesthetics like the dark dark brownish color here with the red just works really really well the glow that looks like it's on those blocks too um everything about it and like the the outside glowy things like even you see like there was the animation on the out there it is again like really really awesome this one is by nell cousin have you ever had the feeling we are not sure if you're awake or still dreaming the one a nice little 3d flip over i would say just one thing that could help with it is if it wasn't like because it's black on black but like the there's like a cart there's like a physical thing with the rabbit but because the background is the exact same color of it we don't really see it coming around as much so if there was a little something a slight difference in color for the background on this side you'd see it more as it's coming around i think or if the background was a slightly different color instead of pure pure black one of the two um i think it would just sort of help fill in that like that last little touch um that would just make it feel more like it's flipping around instead of just sort of like sliding out like that but very nice i love little i love the spinning effects like this they're always fun um this one is by alvaro montouro who i think we already had or i've talked about before this is a step tracker show details did i look at this one in a one of my react videos i feel like i've seen this before it looks a little bit different than what the one i saw though so maybe it's a stepped up version or a different version of it alvaro i if if i haven't mentioned you earlier in this video i definitely recognize the name so i know for a fact i've seen stuff from alvario and i think i've mentioned them in my reaction videos in the past very awesome very cool uh here is a 3d cake by s sahar yar sorry for mispronouncing your name um so harry r 3d cake look at that very nice we have a few from s sahariar very clean looking let's go see the next one by sahar chess pieces show controls so i could actually play chess right now oh we can rotate the board around very cool highlight pieces hide borders i'm just curious but it's even like animated there to bring them in reduce animations with animations disable scrolls spin 360. very cool hide controls lots of detail in there lots and lots of detail i'm impressed um and here's the other one by sahariar which is a guitar we got more controls look at this look at this i mean just the strings and everything on there and again the details that are going into all of this are really really awesome i shouldn't have rotated that much oh i can set up a spin disable scroll spin and you can control the timing of it you want it to spin quickly do you want it to spin slowly and how long this so there's an a and b i don't know why we have an a and b we could dig in deeper but we don't have time for that right now uh but yeah really just really really cool here's another rubik's cube this one's by brian alexander with a nice little animation on it to rotate us around as it look let it lets us look at all the different size i'm just watching the shadow animation right now for it to turn that way yeah that shadow animation is really really good and i know that that's not necessarily very easy to do so very good stuff on that dub roar mirror dobromir and we get this nice carousel 3d carousel i sort of like that we have the transparency on the side but we can see what's in the middle just because it makes it a little bit more you know it hammers home that 3dness of it all just a little bit more so very cool uh thank you for that i'll go with dobro123 um instead of butchering your actual name de bromier i think i got it uh next up we have two from garrett so this first one is we can see he's done a lot with 3d but he did submit i think it's this next one specifically so i'm going to take a look at that one rotating draft and chessboard with css only no images are used very nice there's like a nice like ringed texture on that actually that's really cool i wonder if that's something else that's like a gradient placed on top of the entire thing to give us that texture and as we saw there was some 3d text and other stuff that looked really good as well but we're going to have to keep on trucking on this one look at that with a nice little hover effect so this one is by [Music] rene van der lend which we have one more submission from as well coming up in a second uh but a nice little an an interesting take on the 3d spinning stuff we've done cubes we've done 3d text we get like sort of a flat circle but it's not flat it's like these flower petals that are semi-transparent and let's go oh and here i saw we had two submissions but look at this one oh look at the shadow cool i love it when people give us controls on stuff like that look at that i guess it's the height that's set on them it's the first time i've seen border radius 100 not actually look really bad it gives us this flower petal look super cool and then you can what's that doing that's a border around the whole thing ah interesting okay so it gives us more hmm very neat very very cool i love this i love when you get controls and it's in like real time like this it just makes me so happy i just realized the letters it's probably some blend modes going on there really nice uh really good stuff renee cool next up we have this by varun this bass scene it's like a lamp i'm guessing this is a lamp holding we have a nice soft glow coming around so this is where if you add a little bit of transparency if it is a lamp maybe i'm completely off base but if it is like a lamp that's glowing just a little bit of transparency coming on that can be nice because you know usually at the glass you have that transparency you see the other sides a little bit um and i think it would just really hammer everything home on it but really nice next up we have this one by uh jihad kurto kurdu sorry kurdu i think um another rubik's cube that's running rotating around a nice detailing on the rubik's cube actually where we get like the in inside spaces it looks like we actually have like a little bit more shape going on like we actually have the little notches and stuff looking really really good awesome next up we have a spinning globe in this really stylized look that my i i also have like a million tabs open right now um so but definitely a lot for the browser to handle on this one with css only going on here really cool placing all of that on and making it spherical that must have taken a while that's this one's by fernando menendez really awesome really cool um um the amount of work that must have gone into this um beyond the coloring even and just setting everything up positioning all of the dots in the right place creating like the matrix or what however you would have done it to get everything in the right place really awesome here's a beating heart by michael poragh very cool oh if i click it it sets back sets it back to like we can just look at it and we can let the animation run cool nice stuff michael next up we have oh look at that that's really oh that's really cool this is by an oh anna if you don't know anna uh this is anna tudor she's up to all sorts of crazy stuff all the time um just here like the reason that my my ooh and then was just like already it's just really cool seeing it you have a nice texture on it but then like you have the 3dness like it's not just a flat moon we have a thickness to it and then the one that really got me was this one here um just because not only is it expanded like this is uh but we actually have like each piece i don't know what the terminology is for that but it's another level of 3dness that's coming on that i think i have a few from anna so thank you very much for this one even this like look at the string just the having that texture on the string there to hammer it home the different textures on the wood really really cool uh yes let's see what else and it looks like we can get some music playing if we wanted to as well let's see what else anna has given us so here's another one pure morphing polyhedra with some rotating text oh yeah look it's changing with no javascript look at that and then it's gonna morph back the other way i'm assuming at the next stage oh my goodness there was another stage to it i was waiting for it just to go back to what we had at the beginning but no we got we got another level of of coolness happening oh i get it and we see what it's doing up here i was just like so it's collapsed too and then it's going to turn into the dodecahedron then it's going to rectify to oh that's so cool and then we're getting so i think this is sort of where we started right an icoside the cathedral [Music] and then reverse rectify to so that's really cool awesome and i think the last one from anna look at that glow in the middle that's just one of this one's super fun so like disintegrating as it's going and then building itself back up and it's like the energy ball in the middle there um makes me think of a sun but it's just like this the glow that's on it just gives more of a feeling of like some sort of energy or something going on there oh it says it's a candy i don't know i think that's just really awesome with again there's no javascript running no no gsap or anything and as anna's one of those people who just creates amazing things and i have no idea how she does it yeah really really awesome here we have another one to watch open to open the watch click on the lid and who's this one by that was we had a few from anna this one is by sash sashtage sashti uh oh to open the watch click on the lid to close the watch click on the button click on the lid and then we click on oh i'm guessing this button and then we can close it i don't know if you need the description of the little modal that popped up it made me think like i didn't realize i had to exit um i don't think i don't know if it's needed maybe something on the lid just itself to sort of show that it's clickable you get the hand you you can see that you can click but yeah really really awesome very cool uh i like them sort of like it closes then we get that nice closing animation just even the coloring on that with a gradient just hammers it a nice little hinge on it and everything very cool here we get a what looks like a 3d card by anya and let's go and see what happens when we flip it over oh haha so details so there i like that we get that little thing but um there's the back face visibility so i'm seeing one of the backs right now which i'm assuming wasn't uh intended because the coloring and everything on here is so nice click the button to flip the card yeah so one side we're not getting the back face visibility but on the other side we are um so something happened along the way and i'm assuming especially with how clean that side looks i like that little starting animation the other way before it clicks over though and the font choices and stuff it looks really good so just a little back face visibility would fix that and then yeah very cool so thank you for the submission and yeah and let's go into the next one in nature so this one is by neffy oh there we go that's cool nice little sort of intersection like this that's spinning around nice exploration of some of the things we can do with perspective in 3d very cool next up oh this looks interesting by alex i'm guessing alex chemis where we get a little shadow and even look at the lighting on the ball too so it's this cool so obviously it's i guess a few different animations that are all linked to the mouse positioning and so as we drag the light source everything will just automatically like the ball the light source and the shadow on the ground are just opposite one another right and then just a bit of work i guess on the ball and that's what really the lighting on the ball is the best part the lighting on the ball is really nice the shadow on the ground maybe if we got it to get to zero at one point just like a bit more of a fuzzy edge on it because like the lighting on the ball is very fuzzy so a little bit more on the other one as well would just make it actually the one on the ground to get it to look really good to be hard because it would actually have to stretch out a little bit instead of being a circle it would have to be an oval just because it took a ball and do a flashlight i'm pretty sure you'd get more of an ovaly look to it um so to actually get it to be really good but even if you just fuzzied out the sides i think it would be perfect oh this one's fun i like that this one's by michael porrag again say i thought i grouped everybody but obviously i did a bad job of that there's just been too many submissions but a nice air balloon right here by michael really really awesome nice little animation that's not just like one thing repeating repeating repeating we have it's rotating we have the movement up and down that's different as time's going on so a little bit of extra work gone into that to make that work here we have another rotating scene an old tv rotating around this one is by orville chomer orville thank you very much for that one one thing that could if you pulled the perspective back just a touch i think it would just hammer it would make it feel a little bit more like right now i think just see i'm terrible terrible terrible if you watched my 3d card on grid video you'll see like i have no idea how perspective works but i think if we pull the perspective back a little bit on this it would just make it feel a little bit more natural uh if i'm remembering it's either it must be backwards more i think that's the one but yeah i think it looks really cool nice work on it i like the shadows it's not just a perfect cube you actually have a rectangle i think that's harder maybe the video playing on it which is really cool so this dartboard is by joel nixon so we have it spinning around on itself we could just do it if ever you i saw it on the last one too where you get the the scroll bars that appear and disappear um on these just because of the scene and how the scenes move around so just doing an overflow hidden on the body could help with that um a little bit of shadowing on these guys and i think the shadow like if you have a gradient i don't know if you'd have to play with that a little bit or not maybe it's harder than i'm thinking because of the light source maybe it wouldn't work especially because we have a wob like it's not only spinning but the center is sort of like we're not perfectly done we're off kilter so maybe the shadowing on that would be harder than i think but a little bit of shadow if you could do it on these again would just on the the dart itself could really hammer at home but it's still better than i could do so um it's easy for me to comment i don't know how i would even begin to make something like this so that one's by joel nixon and next up we have this one this one is by timothy taran and it's a plane and i'm guessing written by maybe turn when this loaded i saw it in 3d so i know there's a 3d aspect ah there we go we got a nice 3d plane and then i'm guessing it's going to come back around super cool i like all the different pieces uh it'd be kind of cool the finish state or the beginning state was just rotated a little bit um or if there was even like a replay button or something just so i could go back through it uh i'm nitpicking obviously but like here you can see the whole thing is 3d then when it goes back to its resting state it just looks sort of 2d ish like we don't get the magic of it being 3d right now but you put a lot of hard work into this and so you know show that off show off all the hard work you've done all right maybe the beginning stage it goes all the way but when it finish you're probably just rotating the animation back and forth though so maybe i'm not picking or you just have so just like if the start and end was just a little bit off i think you could be again show off a little bit of what you're doing and next up from aaron we have this one this reminds me of one that i did a reaction video to but it's different is it different yes it is different but it's really cool again one of those ones that's just super satisfying to watch i'm guessing you only this is where you build the cube once you're animating it and then you're just having to position everything properly and there's some nth child selectors probably going on so whether it's from the top the middle or the bottom how it's growing um but actually getting it you know i'm making it sound easy this is not easy and it's really really cool and again very satisfying to watch and that one is by aaron all right next up we have uh-huh i see they shared this one before they were when they were working on it i think or after it was finished maybe it's gonna slide through so i saw they shared this one with me on twitter this is by siddharth porwal and then it's gonna go in under the table thrown in the garbage and then starting over again very cool building a sandwich in 3d with css super cool first attempt at first attempted 3d css like you're putting us all the shame here [Laughter] really really awesome um yeah we'll go with cuber because i think i i completely mucked your name up so awesome really cool here is one by md rahim alan alam lam my name is and then it rotates around in 3d and then we get that coming back the other way that's fun it's a nice little different take on some of the 3d spinning text like single cards we're doing here we have like multiple cards going around and stuff i like the other side more than this side it's more playful with the turned pieces like that um and because you have multiple colors you can actually see how they they line up one thing that could be nice just if ever you wanted to play with it more is just at the end of the animation if it paused for a little bit and then so you had like a little rest you could see it and then it started when it went back the other way um be a nice little touch just to give us that second to read it and then it kicks back in look at this one this one's by tino court veslusi sorry um with these cubes falling down and going on their little conveyor belt to their own demise and because i so it's probably a very similar uh like setup for all of them because of the different animation speeds they're always just changing it makes it it's the same thing running all the time but it just makes it feel more random and more natural because there's that delayed animation because it's on the different speeds i'm guessing they're all exactly the same the spacing looks a little bit different but each track is on its own just looping animation right but because of the and maybe there's like a set delay that's a little bit different on each one but it just gives it a very natural feel because it looks very random how they're falling so it's probably a combination of maybe a slightly different delay and then just the timing one's faster one slower and then hover me carefully well i have to be careful with this one uh this one's by oh i see why it says careful by free timmerman and so let's go and check that out uh so let's just move slowly but this is with css only i think um which is why you have to build like your grid system of hovering areas and we have a globe that we can spin around really really cool yeah that's one of these again one of those ones where i know technically how it works but i don't i wouldn't know how to do it myself cool stuff let's go on to the next one which is oh my goodness this is by cam cell look at this another one of those isometric style ones very nice pure css crossy road pure css guys the time that would have to go into something like this it's just really cool i like the chicken on there we have we have the pile up because of a chicken crossing the road but just the style of it with the isometric design all the work that must have to go into something like this very very cool cam cell nice stuff next up we have this one by fitz uh another halloween one again when i issued this challenge it was very close to halloween so so i mean you can sort of yeah really cool the there's a lot of work in this one it's not just a sphere we have all the pieces that are cut out of it um yeah that would not be easy at all yeah i don't know what else to say i'm at a loss of words um here we have a few from jay so a little bit like anna i know jay um jay's work and uh he's up to some very cool stuff i have a feeling yeah if i click here it's gonna explode out of there if i come over here this sound with this one too as it clicks around super satisfying little clicks too that the sound you picked is perfect for it that's a really creepy picture though jay we'll we'll end it we'll end this one on that nice little shadow effect there so we have like the 3d thing there but we also have that interaction with it oh we can change the grid size let's make the grid really small oh okay so now it's really big and then 14 so lots of little grids which the browser had a little bit of trouble with that one i uh there we go uh awesome and we're getting close to this holiday season so maybe that's a better one to leave it on so that one's from jay using gsap and react on flippy snaps here's this stack overflow stuff which i've seen a little bit of in the past so he has a few different versions of it we'll go with the one we can click because why not clicking sounds interesting so we get the the stack overflow there we go and he has other ones where it's like running constantly very nice very satisfying super cool and we have another one from jay we do oh look at that no motion medium motion lots of motion very cool choose a team blue oh and i love that jay always puts the sounds into his stuff just these little like surprise sounds that are always fun very fun very cool thank you jay for some submitting a few things in here awesome next up we have another rubik's cube css only from ali yeah really cool that we're getting like we're not just seeing the rubik's cube spin around we have the different axes that are breaking apart on their own in both ways uh super nice touch there the different animations going on different speeds and stuff i wonder if that's a different timing function that they put on both of them or if it's like here it's a delay so there's different delays on each axis and i wonder if it's all the same animation with different timing functions and delays or if there's a little bit more to it and actually different animations running on them um because yeah you can do that in different ways this is really cool [Laughter] they're following my mouse around it looks like could we get that on youtube there is a youtube link there for anyone who want this is by brian stoner and yeah look at that super cool that's so fun and there's no javascript so here's another one where we can you can set up i'm guessing there's a grid and based on where the mouse is which one's being covered on it affects other things there's no javascript but we have a goofy dog very cool and saying thank you to jay for the cube styles so yeah brian really nice i was i was very much expecting some javascript in this one to see none in there is pretty awesome all right and we're getting close to the end guys here is a bouncing ball from mayer so it might not be as impressive as the last one we saw but it's still so much hard work here so mayor awesome like just taking these steps to take what you're learning with the 3d stuff challenging yourself to be able to pull this off uh really really cool the lighting on there looks awesome so the next stage let's add a shadow down underneath it's been a long time since you've submitted this maybe you already have and that would just be you know give us that extra perspective and make everything look really really good but super job off to a great start and then here we have a hover me by oh another one by mayor oh look at that that's a nice one mayor i like this one a lot the little 3d thing nice little hover effect there nice job and oh we have a king of hearts here this is by croutic rot that's just a really nice looking card we have both sides of it as it just spins around very enjoyable the animation's really nice because it's not like hitting an ending point it's easy like when we get to sort of a resting point it sort of slows into that point and then goes just to help make it feel a little bit more natural and everything all right next up we have a 3d cube this one's by oh another one by crew tick and if i click me i love css a nice little touch there i love that a nice little surprise cube box uh so something something else we can do with the cubes just to make things a little bit more interesting we had the reveal this time we had an opening box uh can i close the box let's just refresh maybe there's a way to close the box i don't know about but i just want to see that yeah very satisfying i enjoyed that thank you for for that one crew tick i love css awesome so do i uh this one is by walter manuel and i think we had to scroll down if i remember right to get to here and they made there we go a spinning little carousel and i like that it's sort of like flushing like we're getting to the back and then it's like we're not just flipping the next one flip in the next one it's kind of interesting it's like you're gone and then there's something else and then we're flushing that one out and then here's the next one so a cool little fun way to do that and the last one's coming up now and i just want to warn for anybody who doesn't um is sensitive to like flashing and stuff this one does have a lot of flashing that's going to be coming up and it's like really really constant so uh just as a word of warning before i go on to that one it's a cool one i like it but again if you're sensitive to flashing and really quick movements or anything like that it might not be the right one for you so yeah just we're going to end on that one so thank you for that and let's let's go and check it out now and it's right here where it's one of those like spinning the old movie boxes or whatever this is how they could get like animations right first version cartoons you'd look through the box and you'd you'd be getting the running horse where they had the series of pictures they would spin around i think it's it works something like that right um and here we go there's a running horse like we used to see in the very old days like we as if i was around back then but a really nice submission right there and just in case you're curious about actually how you can create these things on your own you see these you want to be able to do it yourself i have had amicing join me more than once on how to create some of these things in 3d so those videos are right here for your viewing pleasure if you want to check them out and with that a really big thank you to my supporters of awesome over on patreon johnny adam stewart randy and tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corn on the internet just a little bit more awesome

Channel: Kevin Powell

Views: 31,751

Keywords: HTML, CSS, 3d css, amazing css, 3d css challenge, css creations, css wow, incredible css

Id: VJGBjSGPpVk

Length: 69min 5sec (4145 seconds)

Published: Fri Dec 10 2021