Monday, September 13th, 2010

Animated CSS3 cube using 3D transforms

Category: Animation, CSS

I’ve been doing alot of experimenting with HTML5/CSS3 on the iPhone doing animation, and I’ve been surprised with the low frame rate of animating through Canvas or SVG. If you are trying to do animation, especially 3D, on the iPhone it seems like the name of the game is to it through the GPU, and the only way to do that these days on iOS is CSS3 Animations/Transitions/3D.

These experiments caused me to stumble on Paul Hayes interesting work simulating a 3D animated cube using CSS3, hence they happen on the GPU on the iPhone/iPad and are quite fast:

A 3D cube can be created solely in CSS, with all six faces. Using JavaScript to detect key presses and update inline styles this cube can be intuitively navigated.

Demo (Webkit only)

Paul achieves this by having each face of the cube be a unique DIV, each with a ‘face’ class and inside of a larger ‘cube’ class all wrapped by an ‘experiment’ class:

  1. <div id="experiment">
  2.         <div id="cube">
  3.                 <div class="face one">
  4.                         One face
  5.                 </div>
  6.                 <div class="face two">
  7.                         Up, down, left, right
  8.                 </div>
  9.                 <div class="face three">
  10.                         Lorem ipsum.
  11.                 </div>
  12.                 <div class="face four">
  13.                         New forms of navigation are fun.
  14.                 </div>
  15.                 <div class="face five">
  16.                         Rotating 3D cube
  17.                 </div>
  18.                 <div class="face six">
  19.                         More content
  20.                 </div>
  21.         </div>
  22. </div>

The outer wrapper is the camera and allows you to apply perspective and where you want the perspective origin to be:

  1. #experiment {
  2.     -webkit-perspective: 800;
  3.     -webkit-perspective-origin: 50% 200px;
  4. }

The #cube itself is given a size, CSS transition properties so things will animate nicely, and an instruction to preserve 3D children and not ‘flatten’ them:

  1. #cube {
  2.     position: relative;
  3.     margin: 0 auto;
  4.     height: 400px;
  5.     width: 400px;
  6.     -webkit-transition: -webkit-transform 2s linear;
  7.     -webkit-transform-style: preserve-3d;
  8. }

Each of the faces is given some common styling:

  1. .face {
  2.     position: absolute;
  3.     height: 360px;
  4.     width: 360px;
  5.     padding: 20px;
  6.     background-color: rgba(50, 50, 50, 0.7);
  7. }

The individual face DIVs are then rotated and translated in 3D space into their correct positions:

  1. #cube .one  {
  2.       -webkit-transform: rotateX(90deg) translateZ(200px);
  3.     }
  5.     #cube .two {
  6.       -webkit-transform: translateZ(200px);
  7.     }
  9.     #cube .three {
  10.       -webkit-transform: rotateY(90deg) translateZ(200px);
  11.     }
  13.     #cube .four {
  14.       -webkit-transform: rotateY(180deg) translateZ(200px);
  15.     }
  17.     #cube .five {
  18.       -webkit-transform: rotateY(-90deg) translateZ(200px);
  19.     }
  21.     #cube .six {
  22.       -webkit-transform: rotateX(-90deg) translateZ(200px) rotate(180deg);
  23.     }

Read more in Paul’s post.

Posted by Brad Neuberg at 6:00 am
Comment here

3.2 rating from 13 votes

Comments Here »

Comments feed TrackBack URI

Leave a comment

You must be logged in to post a comment.