From the course: CSS: Transforms and Transitions

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Create a 3D cube

Create a 3D cube - CSS Tutorial

From the course: CSS: Transforms and Transitions

Start my 1-month free trial

Create a 3D cube

“

- [Instructor] In this video, I'm going to create a more complicated 3-D object. It's going to be a cube that I can rotate along any of the three spatial directions. Creating a 3-D object like this simply involves taking all the pieces that make up the cube and putting them together in the right order. First of all, let's look at our structure. I have a container object that's going to define the 3D space, and within the container object, I have a cube object that I'm going to rotate. One important point that we want to keep in mind here: this cube object, which I've outlined here, is 300 pixels wide by 300 pixels tall. I want to remember that because that's going to become important in just a minute. Okay. Let's start our cube by creating the front face. And to do that, I insert a div element with the id front inside the cube. It gets placed at the center of that cube face. But since I want that front face to be forward, what I do is I translate it along the Z axis 150 pixels. Now…

Contents