Adding 3D features to your website has never been easier. Thanks to advances in CSS and JavaScript, methods and frameworks are now built into this. In addition, these powerful tools open the door for serious creativity.
And while 3D animation is widely used, a third dimension can be used in other ways. Containers of materials such as UI cards, buttons, or typography, can take advantage of the effect, as can product displays and infographics. There are many possibilities.
In particular, 3D features can be great fun. Whether you use them to power a game or to draw attention-grabbing arenas, they naturally draw users in and keep them interested.
And fun is our focus for today. We have put together eight exciting volumes of code that will help us make visitors smile on your site. Let’s get started!
The globe you were looking for by Ksenia Kondrashova
This interactive 3D globe has a unique look and includes some interesting technology. Not only can you “turn” it by clicking-and-drag or touch, but you can also jot down points. Click to add a point, and the script will display its geo-coordinates.
Check out The Globe Pen You Were Looking For (Three.js + GLSL + GSAP) by Ksenia Kondrashova
Lowpoly 3d pyramid in CSS by S. Shahriar
Here we have the winning combination of 3D object and polygon art.
Drag the colorful pyramid around to change its perspective. Interestingly, most of this snippet is mostly CSS driven, with a little help from JavaScript.
View Lowpoly Pen Pyramid CSS 3D (simplified) by S. Shahriar
Fás Anim and YCW
It’s great to see this eclectic mix of plant “flowers” on screen. But start rotating this 3D object to have a truly crisp effect.
The presentation can be rotated full 360 ° with extremely smooth animation. The presentation uses HTML canvas and can serve as a guide for creating an interactive product display.
See the Peann 124. grow anim by ycw
Dibyajyoti Mishra recreates the “Minimum Keyboard” by Jacob Foster
There is more to this virtual keyboard than meets the eye. It not only looks great, but it is also fully interactive.
Make sure your browser is focused on the presentation, and that the keyboard emulates your typing. Hit the colored buttons on the right to offset a fun animated effect.
Take a Look at the “Minimum Keyboard” Recreating a Pen by Dibyajyoti Mishra by Jacob Foster
150ml of Vanilla CSS by Paulo Nunes
Here’s proof that you do not need fancy animation to make a fun 3D element.
This virtual package is built with CSS and takes advantage of the box-shadow and transform properties to create perspective. It is a modern coding phenomenon in itself that uses text instead of images for labeling.
Check out the 150ml vanilla CSS pen by Paulo Nunes
Preab by Louis Hoebregts
There is some serious physics involved with these fun bouncing balls. Watch as they fall onto a 3D rotating platform and blast by impact.
Bonus points for visual effects that look like humor after each ball has reached the end of its journey.
Check out the CodePen Pen Challenge – Bounce by Louis Hoebregts
Toggle 3D by Adir
Toggle switches make a nice addition to forms. They are extremely simple and offer a more attractive alternative to a set of “Yes / No” radio buttons.
But this fragment takes it to a whole new level, complete with a 3D ball and some cool animated transitions. It would not be out of place on user account dashboard.
Watch the 3D Toggle Pen by Adir
CSS 3D Image Effect Only by Temani Afif
Are you looking for a way to spice up ordinary images? This pure CSS effect gives a very compelling visual experience.
Each image features a 3D perspective and hovers the scene “slab” and reveals a title. No bold framework is required to add a fun element.
View a single CSS Pen 3D effect image with Temani Afif
3D Elements that Jump off the Screen
When you think about it, all you need to do is create a basic 3D feature on your website with just a little bit of CSS. It only reflects the progress that the language has made over the years.
But CSS is just the starting point. Adding JavaScript, including frameworks like GSAP, can produce professional-grade results. Some of the items above are great examples of what can be accomplished. The third dimension has never been closer to developers.
Want to explore more fun and creative ways to integrate 3D into your projects? Head over to our CodePen collection to continue your journey.
