News

Create a spinning 3D cube effect

Inspired by Design Embraced, recreate the 3D spinning cube found on their homepage

1

We’ve seen a number of cubes used across websites and Design Embraced has also used the new CSS transforms and rotations to create a great effect. While the site is initially loading there is a cube on the page that spins around a full 360 degrees, which is very effective in drawing the user’s attention while the rest of the content is still loading.

Once this has loaded the cube remains a part of each page by sitting in the top-left corner of the site. As the background carousel changes, the cube rotates while the new image is sliding across. This offers users a nice piece of animation to enjoy before they go on to explore the rest of the website.

Make the six sides

To start off proceedings, you will need to add six sides to your cube. In the body section of your document add the following <div> tags to wrap the six sides in a spinner and that in turn inside a stage.

001    <div id=”stage”>
002            <div id=”spinner”>
003                    <div class=”face1”>1</div>
004                    <div class=”face2”>2</div>
005                    <div class=”face3”>3</div>
006                    <div class=”face4”>4</div>
007                    <div class=”face5”>5</div>
008                    <div class=”face6”>6</div>
009            </div>
010    </div>

Set the stage

In the head section add the style tags and inside add the CSS code shown below to style up the stage <div> tag. Here we’re setting the perspective to 500, which enables the cube to have angled edges as it spins. We are positioning the cube a third of the way down the page and a third in from the left.

Style each side

Now we turn our attention to how each side of the cube looks. Here we are adding a 1px grey border around the edge of each side, setting the background to red and adding a little shadow around the edge of each side. This helps it to look more realistic in 3D.

001    #spinner div {
002            position: absolute;
003            width: 200px;
004            height: 200px;
005            border: 1px solid #666;
006            background: rgb(255,0,0);
007            box-shadow: inset 0 0 60px 
rgba(0,0,0,0.6);
008            text-align: center;
009            line-height: 200px;
010            font-size: 100px;
011    }

Rotate into a cube

Now we add each of the CSS rotations for the sides so that each one is positioned as a cube in 3D space. The third and sixth sides make up the top and bottom of the cube, which aren’t seen but are useful to have in case you want to make the cube transparent.

001    #spinner .face1 { -webkit-transform:
translateZ(100px);}
002    #spinner .face2 { -webkit-transform:
rotateY(90deg) translateZ(100px);}
003    #spinner .face3 { -webkit-transform:
rotateY(90deg) rotateX(90deg) 
translateZ(100px);}
004    #spinner .face4 { -webkit-transform:
rotateY(180deg) translateZ(100px);}
005    #spinner .face5 { -webkit-transform:
rotateY(-90deg) translateZ(100px);}
006    #spinner .face6 { -webkit-transform:
rotateX(-90deg) translateZ(100px);}
007    </div>

Animate the spin

Now we add the keyframes to the cube so that it spins 360 degrees in 70 per cent of the time and pauses for 30 per cent before spinning again. Finally these keyframes are added to the spinner and it is told to repeat. Save this and test it in your browser.

001    @-webkit-keyframes spincube {
002            from,to  { }
003            70%      { -webkit-transform: 
rotateY(-360deg); }
004            100%    { -webkit-transform: 
rotateY(-360deg); } 
005    }
006    #spinner {
007      -webkit-animation-name: spincube;
008      -webkit-animation-timing-function: ease-in-out;
009      -webkit-animation-iteration-count: infinite;
010      -webkit-animation-duration: 1.2s;
011      -webkit-transform-style: preserve-3d;
012      -webkit-transform-origin: 100px   100px 0;
013    }
014    </style>
×