CSS 3D Transforms - Cube
CSS Rotating 3D Cube
Here we demonstrate how to make another classic 3D object: A rotating cube.
The HTML Structure
Let's start with the basic HTML structure:
<div class="container">
<div class="cube">
<div class="face front">front</div>
<div class="face
back">back</div>
<div class="face right">right</div>
<div class="face left">left</div>
<div class="face
top">top</div>
<div class="face bottom">bottom</div>
</div>
</div>
The container element will house the 3D
space. The cube element acts as the 3D object.
Six separate face elements are used for the
six faces of the cube (front, back, right, left, top, and bottom).
The CSS Styling
First, we define the 3D container box: Apply perspective, along with height,
width and margin:
.container {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 600px;
}
Now the cube element can be transformed in its container's 3D space.
We add width: 100%; and height: 100%;. The position: relative is used to position cube faces absolutely.
The transform-style: preserve-3d is essential here. It forces child elements
into 3D space. Without this, the faces flatten into a 2D sheet.
We also add a CSS animation, to trigger continuous rotation of the cube:
.cube {
width: 100%;
height: 100%;
position:
relative;
transform-style: preserve-3d;
animation: spin 12s
infinite linear;
}
Then, we add some base styling for all six cube faces. To position the faces in 3D space, we will need to reset their positions in 2D with position: absolute. We also add a translucent red background color to observe the depth:
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
line-height:
200px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: white;
background: rgba(255, 0, 0,
0.5);
}
Next, we need to position each face individually in 3D space. Assuming a 200px cube, each face translates exactly 100px from center:
.front { transform: rotateY( 0deg) translateZ(100px); }
.back { transform:
rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg)
translateZ(100px); }
.right { transform: rotateY( 90deg) translateZ(100px);
}
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom {
transform: rotateX(-90deg) translateZ(100px); }
At the end, we create the keyframe animation to rotate the cube:
@keyframes spin {
from { transform: rotateX(0deg) rotateY(0deg); }
to { transform: rotateX(360deg) rotateY(360deg); }
}
Full Example of Rotating 3D Cube
Here is the full example of the rotating 3D cube:
Example
.container {
width: 200px;
height: 200px;
margin: 100px auto;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style:
preserve-3d;
animation: spin 12s infinite linear;
}
.face {
position: absolute;
width: 200px;
height: 200px;
border: 2px solid white;
line-height:
200px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: white;
background: rgba(255, 0,
0, 0.5);
}
.front { transform: rotateY( 0deg)
translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px);
}
.left { transform:
rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY( 90deg)
translateZ(100px); }
.top { transform: rotateX( 90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
@keyframes
spin {
from { transform: rotateX(0deg) rotateY(0deg); }
to
{ transform: rotateX(360deg) rotateY(360deg); }
}
Try it Yourself »
CSS Transform Properties
The following table lists all the 3D transform properties:
| Property | Description |
|---|---|
| transform | Applies a 2D or 3D transformation to an element |
| transform-origin | Allows you to change the position on transformed elements |
| transform-style | Specifies how nested elements are rendered in 3D space |
| perspective | Specifies the perspective on how 3D elements are viewed |
| perspective-origin | Specifies the bottom position of 3D elements |
| backface-visibility | Defines whether or not an element should be visible when not facing the screen |
CSS 3D Transform Functions
| Function | Description |
|---|---|
| matrix3d() | Defines a 3D transformation, using a 4x4 matrix of 16 values |
| translate3d() | Defines a 3D translation |
| translateZ() | Defines a 3D translation, using only the value for the Z-axis |
| scale3d() | Defines a 3D scale transformation |
| scaleZ() | Defines a 3D scale transformation by giving a value for the Z-axis |
| rotate3d() | Defines a 3D rotation |
| rotateX() | Defines a 3D rotation along the X-axis |
| rotateY() | Defines a 3D rotation along the Y-axis |
| rotateZ() | Defines a 3D rotation along the Z-axis |
| perspective() | Defines a perspective view for a 3D transformed element |
