CSS3 Tutorial: 3D transforms

3D Transform

Until now we have done all kind of things with CSS3, manipulated images, UI elements and text, but it was all in 2D. In this tutorial we will introduce working in 3D space. Because 3D transformations will make heavy use of the computer hardware resources, 3D transforms are handled directly by the GPU (graphical card) instaed of the CPU (processor), providing a high frame rate during animation. This is called hardware acceleration.

3D Transforms do not to degrade well in the browser: if the 3D transform is not supported by the browser, elements will appear stacked on top of each other. This is something to remember when working with 3D transforms.

We will start with a simple 3D rotation of an image around the y-axis. Note that the CSS3 transform rules need vendor prefixes. For the sake of clarity we will however omit them in our examples.

Example1: simple 3D transforms rotation around the y-axis

The HTML

<!DOCTYPE html>
  <html>
  <head>
  <meta charset="utf-8"/>
  <title>Example 1 :: 3D transforms rotations around the y-axis with intervals of 30 degrees</title>
  <link href="../../articles_styles.css" rel="stylesheet" type="text/css" media="screen">
  </head>
  <body>
  <div class="wrapper">

      <div class="subwrapper">
      <div class="square t0">
      <span class="image"><img src="images/tr3_john.jpg"  alt="0 degrees rotation"/><br>John</span>
      </div>
      </div> 
  
      <div class="subwrapper">
      <div class="square t30">
      <span class="image"><img src="images/tr3_ursula.jpg"  alt="30 degrees rotation"/><br>Ursula</span>
      </div>
      </div> 
   
  	  ...

      <div class="subwrapper"> 
      <div class="square t330">
      <span class="image"><img src="images/tr3_alexander.jpg"  alt="330 degrees rotation"/><br>Alexander</span><br>
      </div>
      </div> 
  
</div>
</body>
</html>

The CSS

div.wrapper{
  width: 500px; 
  }

div.subwrapper{
  width: 150px;
  height: 150px; 
  background: #eeeeee;
  float:left;
  margin:5px;
  min-height: 100%;
  }

div.square{
  font-family: 'DesyrelRegular', arial;
  position:relative;
  width: 140px;
  height: 140px;
  font-size:1.3em;
  color:#666;
  1background:#fbf39f;
  background: linear-gradient(to left top, #fff, #fff );
  margin:5px;
  }

span.image img{
  width:100%;
  height:auto;
  }

span.image{
  display:block;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -65px;
  margin-top: -50px;
  width: 130px;
  height: 80px;
  /*element cannot be shrinkwrapped is it centered*/
  text-align:center;
  }

div.t0{
  transform: rotateY(0deg); 
  }

div.t30{
  transform: rotateY(30deg);
}

...

div.t330{
	transform: rotateY(330deg);
}
3D transform rotations around the y-axis
Image 1. An image rotated around the y-axis in intervals of 30 degrees: 0,30,60,89,120...330 degrees.

Check this example in your browser

Example2: applying perspective

In example1 we implemented various rotations on an image around the y-axis in 3D space. The results however didn't show us any depth, and therefore it is not obvious whether the image was rotated in 3D space or just scaled in 2D space. To make it obvious we need to add some perspective. Perspective in CSS3 is defined by the perspective and the perspective-origin properties

perspective

Syntax: none | <length>

Perspective is defined by the distance of the viewpoint to the image(in px). The smaller the distance the smaller the value for the perspective, the bigger the perspective effect and the bigger also the visual distortion. It is therefore important to find a value for perspective which optimizes the perspective-effect and minimizes the visual distortion (see image 2a below)

perspective versus distortion
Image 2a. perspective versus distortion.

perspective-origin

Syntax: [ <percentage> | <length> | left | center | right | top | bottom] | [ [ <percentage> | <length> | left | center | right ] && [ <percentage> | <length> | top | center | bottom ] ]

Like the 2D rotation has a transform-origin, the 3D rotation has a perspective-origin which influences the way the perspective effect is rendered.

perspective-origin
Image 2b. perspective-origin influences the way the perspective effect is rendered.

CSS adjustments

/*we add perspective to the images by adding
* the last two rules in the  .subwrapper CSS*/
div.subwrapper{
    width: 175px;
    height: 175px; 
    background: #eeeeee;
    float:left;
    margin:5px;
    min-height: 100%;
    /*Here the perspective additions*/
    perspective:400px; 
    perspective-origin: center center; 
}
3D transform rotations around the y-axis with perspective
Image 2. images rotated 45 degrees around the y-axis and given perspective

Check this example in your browser

Example3: creating a more consistent visual appearance.

In example 2 we applied separate perspective properties to each of the images, resulting in the impression that each element has its own visual origin (and therefore its own vanishing point), and is displayed unrelated to the other images. Perhaps this is what you deliberately aimed for, but in general it is recommended that you apply the perspective once to the wrapper element, which is the parent of all the images. This will create a consistent visual appearance, with the same visual origin (the eye is positioned in one point) and vanishing point to all the images, as shown in this example.

CSS adjustments

/*we add perspective to the container of all the images */
div.wrapper{
    width: 600px;
    height:600px; 
    -webkit-perspective:800px; 
    -webkit-perspective-origin: center center; 
}
/*the transform property is placed in the image subwrapper*/
div.subwrapper{
    width: 175px;
    height: 175px; 
    background: #eeeeee;
    float:left;
    margin:5px;
    transform: rotateY(45deg);
}
3D transform rotations around the y-axis with perspective
Image 3. rotation around the y-axis with the perspective-origin applied on the ancestor

Check this example in your browser

Rotations around the x-axis, y-axis and z-axis

Rotaions around the x-axis, y-axis and z-axis
Image 3a. The three dimensions and their axes.

Example4: Rotations around the x-axis, y-axis and z-axis

HTML adjustments

<div class="wrapper">
<div class="subwrapper">
<div class="square">
<span class="image"><img src="images/tr3_john2.jpg"  alt=""/><br>Original</span>
</div>
</div> 
<div class="subwrapper">
<div class="square rx">
<span class="image"><img src="images/tr3_john2.jpg"  alt=""/><br>X-rotated</span>
</div>
</div> 

<div class="subwrapper">
<div class="square ry">
<span class="image"><img src="images/tr3_john2.jpg"  alt=""/><br>Y-rotated</span>
</div>
</div> 
<div class="subwrapper">
<div class="square rz">
<span class="image"><img src="images/tr3_john2.jpg"  alt=""/><br>Z-rotated</span>
</div>
</div> 
</div>

CSS adjustments

div.rx{
  transform: rotateX(45deg);
}
div.ry{
  transform: rotateY(45deg);
} 
div.rz{
  transform: rotateZ(45deg);
} 

3D transform rotations around the y-axis with perspective
Image 4 rotations around the x,y,z axes with perspective. The z-rotaion in 3D space is like the rotation in 2D space..

Check this example in your browser

Putting it all together

Example5: rotation around the x,y,z axes with perspective

HTML adjustments

<div class="wrapper">
<div class="subwrapper">
<div class="square rxyz">
<span class="image ">
<img src="images/tr3_john2.jpg"  alt="rotation around the x,y,z axes with  perspective"/>
X,Y,Z rotation with perspective
</span>
</div>
</div> 
</div> 

CSS adjustments

div.rxyz{
    -webkit-transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    -moz-transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    -o-transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    -ms-transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
    transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
}
3D transform rotations around the y-axis with perspective
Image 5. rotation around the x,y,z axes with perspective

Check this example in your browser

Leave a comment