Amazing 3D CSS creations from my community

About a month ago, I challenge my community members to create something, anything, as long as it used 3D CSS in some way, and in this video, I'm featuring all of the submissions!

🔗 Links

#css

--

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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---

---

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

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

---

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

[zachjensz]

100+ tabs of 3D CSS creations: 😊
Kevin's RAM: 😢

[emscawas]

Thanks for featuring my PokeDex sir Kevin. That is the first thing I did after learning 3D css from you. 1:00 - 1:28

[ScriptRaccoon]

16:38 Thanks for covering my Rubik's cube :). You can actually also rotate every layer with the keys given in the info tab (top left) and do much more, for example t for the top layer, l for the left layer etc. and X for scrambling, U for resetting.

[sowg]

35:33 Its Mine!!! Freaking out! Thank you for including I am learning so it a bit low-key

[inklingboi]

Thank you for featuring my projects at 17:35 and 1:07:20 ! (even though the names got kinda mixed up)
The shape at the left is actually supposed to be a tetrahedron, but for the shape on the right I don't know how its called xD
And i also loved seeing the projects of everyone else in this community, especially the interesting shapes that Anna tutor made

[no_papertrail]

Fun to see you enjoying yourself hovering 3D petals. But, no blendmodes going on there. Plain manipulation of HSLA() alpha channel of the BG/FG colors and a dropbox filter for the shadows. The whole thing started out as a 2D 'text on a circle' exercise using CSS custom variables: using the font size and the number of characters it determines the minimum radius required to display the text without overlapping characters. All math is done in CSS calc().
The range sliders of V2 only manipulate the values of the CSS custom variables (so you don't have to do that manually).
Extras: the checkboxes show how to enable/disable an entire <style></style> block with just a one-liner JS (function FP_ToggleStyleById), <form> field values handling JS class, Google Material FAB (floating action button) knock-off, recyclable code, extensive comments in CSS explaining why and how it's done.
Thanks for the mention!

[yodkwtf]

I'm so happy to see the awesome people who created these down in the comments too. Something about that feels really nice. Kudos to all of you. These are so inspiring!

[zenith]

26:27, Looks like my project made its way in . Big thanks Kevin

[mimoduocss]

Oh my goodness, all of them are so freaking cool!! Alvaro's gazebo, Shahriar's guitar, Adam's snacss truck, Benjamin's 3D calculator and everyone else's 3D goodies, awesome work XD I'm also glad you got some giggles outta ma face and goofy doggie @ 1:04:56 that made my day muhohohoho, thank you!

[Russ_Paul]

I think the game you might be thinking of at 17:20 is Q*bert. Released in 1982.

[Poto]

1:02:05 That pumpkin's mine - and indeed it took some blood, sweat, and a few new gray hairs :D Especially since the principal work on it was done on the two last days of the challenge, culminating in a 14-hour marathon of last-minute additions that I'd hesitated about due to time-constraints. Because, hey, it'd be cooler with a carved face. And another face on the back, right? Et cetera ;) Right now I'm actually working on a version 2.0 of it - with better optimization, less clutter, and animated imitation of lighting/shading.

[quickcodingtuts]

I hope you make more of these videos, they are my favorite. I’m sure you will get tons more submissions

[jenstornell]

How cool! This video alone will probably push the world of 3d interfaces forward. I got really inspired of the possibilities. 😊

[dhruva]

Wow.after watching this. I am convinced that Metaverse can be implemented by 3D css.

[dragonore]

The duracel battery guy, I wonder if he opened up his junk drawer looked at the batter and thought "huh, I got an idea."

[cintrond]

The old school running horse animation thing is called a zoetrope

[timv]

Great submissions! I got lots of inspiration! Thanks to all the people who submitted, and to you for showcasing them!

[-UPH-KRISHNAM]

My Pc seeing those much of tabs in chrome: 🥵

[iSilleNcN]

The accordion effect would be really cool with accordion sounds paired with it. Could make an interactive sound board on a portfolio

[sandwiched]

18:39 - I knew I should have included instructions. 🤦‍♂️ Keep the mouse over the cube, don't just move it over and out immediately. :)