Tag: 3D

Learn how to make impressive 3D objects in CSS, and even how to make them do amazing things like print a real image from a URL you supply!

Ever thought of adding lighting effects to your UI buttons? You can! Learn how to create directionally lit 3D buttons with CSS and just a little bit of JS.

We introduce you to Zdog, a library that helps you design and animate in 3D, and show you demos that you can reverse-engineer and learn from.

Craig Buckler shows how to add another dimension to your web pages and applications with the new 3D transformation functions and properties in CSS, covering transform, translate, rotations, scaling, perspective and more, along with z-index, browser gotchas, and ideal use cases.

Learn to make a history education map using 3D mapping tool, WRLD.

This fun tutorial takes the George Costanza's brilliant idea and makes it a reality. We build a bathroom finder app using WRLD's 3D mapping platform.

Set in the World of 24 with Jack Bauer, this tutorial takes you on an epic, but easy to follow journey, to build a dynamic 3D map using WRLD.

Giulio Mainardi shows you how to build a 3D rotating carousel using CSS 3D transforms, with some nifty math tricks and some JavaScript to enhance.

Display 3D maps in just a few lines of code and overlay data from a 3rd-party API. Tim Jenks creates a dynamic map of the London Underground with eegeo.js

Chris Pitt shows how to make a basic 3D Minecraft editor with mostly vanilla JS and some clever CSS, that will later be used to edit a real Minecraft world.

An exploration of some fascinating highlights in the use of 3D printing over the past decade.

Learn how to create simple 3D graphics for the web without WebGL. Jérémy Heleine teaches you how to build your own 3D engine from scratch with JavaScript.

Jason Petersen introduces you to Four, a WebGL framework to build 3D content for the web. It's WebGL but easier, according to him.

Patrick Catanzariti creates an augmented reality LIFX lightbulb controller using awe.js and IFTTT.

Robby Ingebretsen explains how to create realistic-looking terrain using WebGL, in an attempt to revive the original Flight Simulator.

Byron Houwens shows off some of the features of the WebGL spec by building a rotatable model Earth with three.js and some custom scripting.

Read Create a Stylish, Heart-Shaped 3D Gift Box in Illustrator and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

The following roundup includes both characters and landscapes from a variety of 3D animated media.

Learn how to create 3D candy cane text in Photoshop. Learn to create and apply textures to make 3D candy cane text in Photoshop, & add depth to your work.

Read How to Create a CSS3 3D Text Plugin for jQuery and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.

Read How to Create 3D Text With CSS3 and learn with SitePoint. Our web development and design tutorials, courses, and books will teach you HTML, CSS, JavaScript, PHP, Python, and more.