10 Inspiring 3D Web Projects Built With CSS & JavaScript
The web has come a long way from dial-up Internet and GeoCities pages. Websites are now fully responsive and accessible from touchscreen devices. But modern browsers have taken things even further beyond “mainstream” web design.
It’s possible to create amazing 3D effects in the browser using only frontend technologies. And in this post I’ll showcase my favorite 3D web projects that show just how far the web has come in a few short decades.
Kepler Orbits
I cannot imagine how long it took to build this realistic model of a Kepler orbit path. This model shows the movement of a body relative to another in space, and in this case the developer Danie Clawson did an incredible job.
This entire model uses CSS for visuals and Three.js for the 3D effects. In the top-left corner you’ll find an options box where you can change many of the orbit variables to affect the object’s speed, size, and placement.
You might even notice that the orbiting object uses realistic light with shading based on which side is pointing towards the sun. This is wildly impressive and it belongs as #1 on this list for the immense attention to detail.
Perspective Boxes
Believe it or not this box animation was made with pure CSS3 transforms. The actual cubes are pretty easy to render using CSS and the alternating colors work with differing classes.
The animation use looping keyframe animations to give the illusion of these boxes bouncing in 3D space. By clicking any of the perspective buttons in the top-right corner you can even view this 3D model from varying angles. Pretty cool!
Pure CSS3 Graph
One more example of pure CSS3 animation is this bar graph created by Ana Tudor. It uses a simple HTML container with four inner divs representing the four sides of each rectangle.
The bars are easy enough to animate using CSS3 and they all grow to varying heights. But the most impressive part is how this entire animation rotates viewing angles even while the bar graph is growing.
This uses a lot of Sass code to automate the animations with calculation functions so it is a bit technical. But if you’re trying to learn more about 3D then this is a solid pen to dive into.
Tunnel Vision
For a trippy Webkit browser experience take a look at this 3D tunnel created with just some CSS3 transforms and Sass properties.
The alternating colors run through a Sass for loop which alternates the HSL color value after a certain time period. This loops gives off the illusion that you’re traveling through a tunnel of colorful confetti pieces indefinitely. Pretty wild!
It may not seem like anything special and it’s definitely not practical for a major website. But it is a testament to how much you can do with some creativity and coding knowledge.
3D iPhone in CSS
The iPhone 4 offered a radically new design and it got everyone hyped for the killer new smartphone. Developer Jonathan Levaillant must’ve really enjoyed the iPhone 4 since he recreated the design in pure CSS.
As rotating devices go this one’s pretty darn cool. It does look like an iPhone and the outer band even reflects light with a realistic gradient. The iPhone’s screen plays an mp4 video hosted on Apple’s servers and it also distorts properly in perspective.
What’s most insane about this is how it relies solely on CSS for everything. I’ll be psyched in another 10 years when pure CSS3 iPhones are fully interactive in the browser.
3D Solar System
The Milky Way is our little corner of the universe and it’s fully represented in this amazing pen created by Julian Garnier.
It does use a lot of CSS but most of the customizable effects rely on JavaScript. This lets you change the speed, size, and distance of various planets.
You can even switch between the 3D view and an overhead 2D view with relative ease. Talk about a stellar use of frontend development!
Shaded Cubes
These simple shaded cubes may not seem like much. They’re built in CSS and they automatically rotate on one axis using CSS3 animations.
But there’s an interactive setting where you can animate the cubes on mouse hover. This is definitely a cool trick and it relies on a few rare CSS techniques including the :hover and :checked pseudo-classes along with the tilde(~) selector.
CSS 3D Carousel
Image carousels are great to showcase graphics, photos, and even videos in rotation. And with this CSS3 carousel you can take these fun sliders to a whole new level.
This very basic 3D carousel relies on click events to animate between different elements. The 3D style is surprisingly detailed and relies purely on CSS code.
The only JavaScript needed here is to toggle between the next/prev buttons and to animate the 3D styles into place. And this is actually something you could use on a real site so it may have a practical use in modern web design.
Chill the Lion
Here’s something a bit less practical but still incredibly fun to use. This 3D lion render by Karim Maaloul uses Three.js to create a fun game where you can blow some cool air on sweaty lion.
As you move the fan around the page with your cursor the lion’s gaze will follow. Then just click to start the motorized fan and watch the lion’s excitement as you send a cool stream of air his way.
The developer even went so far as to create flapping areas in the lion’s mane along with movement in the whiskers.
This is yet another detailed example of how far 3D effects have come.
3D NES Controller
Classic gaming left its mark on the current generation of coders and you can see this with Johan van Tongeren’s 3D NES controller rendered in pure CSS3.
It works best in Chrome/WebKit browsers although it should render fine in Firefox too. It’s really more of an experiment to see how far CSS has come, so don’t expect it to be perfect!
I hope these examples can inspire you to learn more about frontend development and maybe even create your own 3D projects.
The post 10 Inspiring 3D Web Projects Built With CSS & JavaScript appeared first on Speckyboy Design Magazine.