How to use CSS3 to create a rotating 3D cube

Designer Donovan Hutchinson's tutorial on creating impressive 3D graphics in CSS3 inspired Ryan Boudreaux to create a similar demo. Here's the result.

Figure A: Rotating 3D cube graphic

As CSS3 matures and developers spend more time learning and playing with the technology, we are seeing creative works that utilize the CSS transform, transform-origin, transform-style, translateZ, rotateX, rotateY, rotateZ, radial-gradient, linear gradient, perspective, backface-visibility, keyframes, transition, and transparency properties.

One such work is an impressive demo and code download by Donovan Hutchinson on creating several rotating 3D cubes in CSS3. He uses the CSS perspective, transform, translate, animation, and transition properties to set up the 3D parent space for the child 3D cube objects.

Using Donovan's code examples as a starting point for a rotating 3D cube, I modified several properties of the original code to come up with a similar 3D graphic as displayed in Chrome 33.0.1750.146 m in Figure A.

The HTML code snippet in Figure A includes a main section that is set as the 3D space; inside the section element is the article that becomes set as the cube; inside the cube are the six sides that are defined as individual figure elements, each with a separate class of "back", "top", "bottom", "left", "right", and "front," as shown below.

<h1>DEMO - CSS3 3D Graphics</h1>
	<h2>Rotating 3D Cube</h2>
	<section class="space">
		<article class="cube">
    		<figure class="back"></figure>
    		<figure class="top"></figure>
    		<figure class="bottom"></figure>
    		<figure class="left">
    			<aside class="content">
        			<h1>3D Cube</h1>
    				<h2>Roll the bones!</h2>
    				<img src="i/dice.png" alt="Dice" title="Dice">
    		<figure class="right"></figure>
    		<figure class="front"></figure>

The CSS code snippets, along with short descriptions of each, are displayed below.

The space class is set with a width and height of 300px and a left margin of 120px, along with the perspective set to 1600px, and the perspective origin set to 50% and -240px.

/* Setting the 3D space area with CSS3 perspective */
.space {
  width: 300px; height: 300px;
  margin-left: 120px;
  -webkit-perspective: 1600px;
  -webkit-perspective-origin: 50% -240px;

The figure display is set to block, with an absolute position, and weight and height set as well. The background color is set to #60c2ef, with the transform origin and below box reflection settings using linear gradients, color stops, transparency, and RGBA colors.

/* Setting the cube display, size, color, and transform origin */
figure {
  display: block; position: absolute;
  width: 300px; height: 300px;
  background-color: #60c2ef;
  -webkit-transform-origin: 50% 50% 0; 
  -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent), to(RGBA(0, 0, 0, 0.1)));

Next, the CSS transforms, transforms style, rotateY degrees, rotateX degrees, and translate Z are set and defined for the cube, front, back, top, bottom, left and right sides.

/*  CSS3 Transforms style, Z, X, Y degree and translate for each side of the cube */
.cube { -webkit-transform-style: preserve-3d; }
.front { -webkit-transform: translateZ(150px); }
.back { -webkit-transform: rotateY(180deg) translateZ(150px); }
.top { -webkit-transform: rotateX(90deg) translateZ(150px); }
.bottom { 
	-webkit-transform: rotateX(-90deg) translateZ(150px); 
	-webkit-box-shadow: 1px 5px 50px rgba(0, 0, 0, 0.7);
	background-color: rgba(0, 0, 0, 0);

.left { -webkit-transform: rotateY(-90deg) translateZ(150px); }
.right { -webkit-transform: rotateY(90deg) translateZ(150px); }

Next, the keyframes are set to rotate on the Y axis from 0% to 100%.

/* CSS3 Keyframes rotate Y degrees */
@-webkit-keyframes rotate {
  0% { -webkit-transform: rotateY(0); }
  100% { -webkit-transform: rotateY(360deg); }

The animation rotate is set to 20 seconds to complete the full rotation for the cube.

/* Animation rotate sets the cube in motion  */
.cube { -webkit-animation: rotate 20s infinite linear; }

The pseudo selectors set the gradient for each of the figure sides before and after.

/* Pseudo Selectors set gradient for each side of the cubes surface   */
figure:before, figure:after {
  content: ""; display: block; position: absolute;
  width: 100%; height: 100%; opacity: 0;
figure:before {
  background: -webkit-radial-gradient(top left, rgba(0, 0, 0, 0.5), #000000);
figure:after {
  background: -webkit-radial-gradient(top right, rgba(0, 0, 0, 0.5), #000000);

.front:before { -webkit-animation: frontShading1 10s infinite linear; }
.front:after { -webkit-animation: frontShading1 10s infinite linear; }

Set the front and back side shading for slight definition using keyframes and opacity settings.

/*  Front shading  */
@-webkit-keyframes frontShading1 {
  2% { opacity: 0; }
  25% { opacity: 0.8; }
  35% { opacity: 0.8; }
  50% { opacity: 0; }

@-webkit-keyframes backShading1 {
  2% { opacity: 0; }
  25% { opacity: 0.8; }
  35% { opacity: 0.8; }
  50% { opacity: 0; }

.left:before { opacity: 0.4; -webkit-transition: all 0.4s ease; }
.left:after { display: none; }
.left:before { opacity: 0.1; -webkit-transition: all 0.4s ease; }
.left:after { display: none; }

Apply the shadow effect to the bottom figure using box shadow.

.bottom {
  -webkit-box-shadow: 0 10px 100px rgba(0, 0, 0, 0.7);
  background-color: rgba(0, 0, 0, 0);

Set the content within the aside to 20px padding.

.content {
	padding: 20px;

The rotating cube created using the above code is displayed in the condensed sized animated gif in Figure B (click the image to see it rotate).

Figure B


Also read on TechRepublic