Adding 3D features to your website has never been easier. Thanks to advancements in CSS and JavaScript, there are now built-in methods and frameworks for doing so. What’s more, these powerful tools open up the door to some serious creativity.<\/p>\n
And while 3D animation is widely-used, a third dimension can be utilized in other ways. Content containers such as card UIs<\/a>, buttons, or typography<\/a>, can benefit from the effect, as can product demos and infographics. There are tons of possibilities.<\/p>\n In particular, 3D features can be great fun. Whether you use them to power a game or an attention-grabbing hero area, they naturally draw users in and keep them interested.<\/p>\n And fun is our focus for today. We’ve rounded up eight entertaining code snippets that can help bring a smile to your site’s visitors. Let’s begin!<\/p>\n This interactive 3D globe sports a unique look and includes some interesting technology. Not only can you “spin” it via click-and-drag or touch, but also plot points. Click to add a point, and the script will display its geo coordinates.<\/p>\n See the Pen The Globe you were looking for (Three.js + GLSL + GSAP)<\/a> by Ksenia Kondrashova<\/p>\n Here we have the winning combination of a 3D object and polygon art<\/a>.<\/p>\n Drag the multicolored pyramid around to change its perspective. Impressively, this snippet is mostly powered by CSS, with a small assist from JavaScript.<\/p>\n See the Pen CSS 3D Lowpoly Pyramid (simplified)<\/a> by S. Shahriar<\/p>\n Watching this eclectic mix of plant life “bloom” on the screen is fun. But start rotating this 3D object for a truly jaw-dropping effect.<\/p>\n The presentation can be rotated a full 360\u00b0 with incredibly smooth animation. The presentation utilizes HTML canvas and could serve as a guide for creating an interactive product demo.<\/p>\n See the Pen 124. grow anim by ycw<\/p>\n There’s more to this virtual keyboard than meets the eye. It not only looks amazing, but it’s also fully interactive.<\/p>\n Make sure your browser is focused on the presentation, and the keyboard will mimic your typing. Hit the colored buttons on the right to set off a fun animated effect.<\/p>\n See the Pen Recreating “Minimal keyboard” by Dibyajyoti Mishra<\/a> by Jacob Foster<\/p>\n Here’s proof that you don’t need fancy animation<\/a> to make a fun 3D element.<\/p>\n This virtual package is built with CSS and takes advantage of the See the Pen 150ml of vanilla CSS<\/a> by Paulo Nunes<\/p>\n There is some serious physics at play with these playful bouncing balls. Watch as they fall onto a rotating 3D platform and burst upon impact.<\/p>\n Bonus points for the comic-like visual effects after each ball reaches the end of its journey.<\/p>\n See the Pen CodePen Challenge – Bounce<\/a> by Louis Hoebregts<\/p>\n Toggle switches<\/a> make for a nice addition to forms. They’re incredibly simple and offer a more attractive alternative to a set of “Yes\/No” radio buttons.<\/p>\n But this snippet takes it to a whole new level, complete with a 3D ball and some cool animated transitions. It wouldn’t be out of place on a user account dashboard.<\/p>\n See the Pen Toggle 3D<\/a> by Adir<\/p>\n Are you looking for a way to spice up ordinary images? This pure CSS effect offers a compelling visual experience.<\/p>\n Each image features a 3D perspective while hovering “flattens” the view and reveals a title. No heavy framework is required to add an element of fun.<\/p>\n See the Pen CSS only 3D effect image by Temani Afif<\/p>\n When you think about it, all that’s needed to create a basic 3D element on your website is a tiny bit of CSS. It just goes to show how far the language has progressed over the years.<\/p>\n But CSS is only the starting point. Adding JavaScript, including frameworks such as GSAP<\/a>, can bring professional-grade results. Some of the snippets above are shining examples of what can be accomplished. The third dimension has never been within closer reach for developers.<\/p>\n Want to check out more fun and creative ways to integrate 3D into your projects? Head on over to our CodePen collection<\/a> to continue your journey.<\/p>\n The post 8 Fun 3D Features You Can Recreate with CSS & JavaScript<\/a> appeared first on Speckyboy Design Magazine<\/a>.<\/p>\n Source: Specky Boy<\/p>\nThe Globe You Were Looking For by Ksenia Kondrashova<\/small><\/h2>\n
3D Lowpoly Pyramid in CSS by S. Shahriar<\/small><\/h2>\n
Grow Anim by YCW<\/small><\/h2>\n
Recreating the “Minimal Keyboard” by Dibyajyoti Mishra by Jacob Foster<\/small><\/h2>\n
150ml of Vanilla CSS by Paulo Nunes<\/small><\/h2>\n
box-shadow<\/code> and transform<\/code> properties to create perspective. The fact that it uses text rather than images for labeling is a modern coding marvel in its own right.<\/p>\nBounce by Louis Hoebregts<\/small><\/h2>\n
Toggle 3D by Adir<\/small><\/h2>\n
CSS Only 3D Image Effect by Temani Afif<\/small><\/h2>\n
3D Elements That Leap off the Screen<\/h2>\n