PageResource.com - Web Development Tutorials

CSS3 3D Transforms Tutorial

You can see all the Transform Properties Here.

The transform property includes functions which allow you to change elements on a webpage three-dimensionally. In CSS2, you can change the position of an element in three dimensions using the z-index property. Visually this property allows you to change how elements on the page overlap with each other. With CSS3 3d transform functions you can do many more 3d manipulations of elements. We will look at these functions one by one.

 
TranslateZ

We have already seen the translate functions for moving the element on the X and Y axes.  The tanslateZ function allows you to move the element on the Z-axis. The amount to be moved is specified by a value. Let us look at an example. We will move two boxes on the Z-axis, one forward 10px and another back 10px from its original position. As we have seen before, you can change the direction using positive and negative values.

Here is the code:


#box1
{
transform:translateZ(10px);
-ms-transform:translateZ(10px); /* IE */
-moz-transform:translateZ(10px); /* Firefox */
-webkit-transform:translateZ(10px); /* Safari and Chrome */
-o-transform:translateZ(10px);/* Opera */
}

#box2
{
transform:translateZ(-10px);
-ms-transform:translateZ(-10px); /* IE */
-moz-transform:translateZ(-10px); /* Firefox */
-webkit-transform:translateZ(-10px); /* Safari and Chrome */
-o-transform:translateZ(-10px);/* Opera */
}

The Z-axis position of the red boxes in the image remains unchanged. The translateZ function is only applied to the yellow boxes.

Translate3d

The translate3d function allows you to perform a 3d translate of an object by combining X, Y and Z values. Let us look at an example. We will apply the translate3d function to two different boxes.

Here is the code

#box1
{
transform:translateZtranslate3d(60px,-120px,-180px);
-ms-transform:translateZtranslate3d(60px,-120px,-180px); /* IE */
-moz-transform:translateZtranslate3d(60px,-120px,-180px); /* Firefox */
-webkit-transform:translate3d(60px,-120px,-180px); /* Safari Chrome */
-o-transform:translateZtranslate3d(60px,-120px,-180px);/* Opera */
}

#box2
{
transform:translateZ(-60px,-120px,180px );
-ms-transform:translateZ(-60px,-120px,180px ); /* IE */
-moz-transform:translateZ(-60px,-120px,180px ); /* Firefox */
-webkit-transform:translate3d(-60px,-120px,180px ); /* Safari Chrome */
-o-transform:translateZ(-60px,-120px,180px );/* Opera */
}

The position of the red boxes in the image remain unchanged.

Rotate

We have already looked at the 2d rotate function, which allows you to rotate the element clockwise or anti-clockwise on a 2d plane. The 3d rotate functions allow you rotate the element in three dimensions. There are four 3d rotate functions, rotateX, rotateY,rotateZ, and rotate3d.

RotateX

The rotateX function allows you to rotate the element about the X-axis by a specified angle. The 3d rotate functions are easier to understand visually. So, let us look at an image. We will apply the rotateX function to two boxes, one for a 30 degree rotate and another for a 50 degree rotate.


#box1
{
transform:rotateX(30deg);
-ms-transform:rotateX(30deg); /* IE */
-moz-transform:rotateX(30deg); /* Firefox */
-webkit-transform:rotateX(30deg); /* Safari and Chrome */
-o-transform:rotateX(30deg); /* Opera */
}

#box2
{
transform:rotateX(50deg);
-ms-transform:rotateX(50deg); /* IE */
-moz-transform:rotateX(50deg); /* Firefox */
-webkit-transform:rotateX(50deg); /* Safari and Chrome */
-o-transform:rotateX(50deg); /* Opera */
}

The boxes with the dotted lines represent the original position of the elements. As you can see in the image below, 3d operations on a 2d surface like a web page can be visually confusing. The image looks like the elements have been scaled to a smaller size. To really understand what is happening, you have to imagine the element being spun around a horizontal axis running across the middle of the element.

 
RotateY

The rotateY function allows you to rotate the element about the Y-axis by a specified angle. Just like the rotateX function, you have to see this function in action to understand how it actually works. We will apply the rotateY function to two boxes, one for a 30 degree rotate and another for a 50 degree rotate.


#box1
{
transform:rotateY(30deg);
-ms-transform:rotateY(30deg); /* IE */
-moz-transform:rotateY(30deg); /* Firefox */
-webkit-transform:rotateY(30deg); /* Safari and Chrome */
-o-transform:rotateY(30deg); /* Opera */
}

#box2
{
transform:rotateY(50deg);
-ms-transform:rotateY(50deg); /* IE */
-moz-transform:rotateY(50deg); /* Firefox */
-webkit-transform:rotateY(50deg); /* Safari and Chrome */
-o-transform:rotateY(50deg); /* Opera */
}

Once again the boxes with the dotted lines represent the original position of the boxes. Again, the visual transformations can seem confusing. Here the element is being spun around a line running vertically through the middle of the element.

 
RotateZ

The roateZ function allows you to perform a 3d rotate about the Z-axis. We will apply the rotateZ function to two boxes, one for a 30 degree rotate and another for a 50 degree rotate.


#box1
{
transform:rotateZ(30deg);
-ms-transform:rotateZ(30deg); /* IE */
-moz-transform:rotateZ(30deg); /* Firefox */
-webkit-transform:rotateZ(30deg); /* Safari and Chrome */
-o-transform:rotateZ(30deg); /* Opera */
}

#box2
{
transform:rotateZ(50deg);
-ms-transform:rotateZ(50deg); /* IE */
-moz-transform:rotateZ(50deg); /* Firefox */
-webkit-transform:rotateZ(50deg); /* Safari and Chrome */
-o-transform:rotateZ(50deg); /* Opera */
}

The image below shows this transform function in action.

Rotate3d

The rotate3d allows you to perform a 3d rotate using all X, Y and Z axes. The function takes four values. The first three values indicate direction and the fourth value sets the angle value of the amount to be rotated . For example, rotate3d(1,-1,0, 30deg) will rotate the element 30degrees forward on the X-axis, 30 degrees anti-clockwise on the Y-axis and perform no rotation on the Z-axis.

Let us look at an example to see this process in action. First let us set up two boxes one in front of the other, as shown in the image below.

We will now perform a rotate3d function on the yellow box in the back. Here is the code we will use.


#box1
{
transform:rotate3d(1,1,1,50deg);
-ms-transform:rotate3d(1,1,1,50deg); /* IE */
-moz-transform:rotate3d(1,1,1,50deg); /* Firefox */
-webkit-transform:rotate3d(1,1,1,50deg) ; /* Safari and Chrome */
-o-transform:rotate3d(1,1,1,50deg); /* Opera */
}

Here is what the element will look like in the browser. Because the rotate includes a Z-axis rotate, the element will cut through the element in front of it.

Leave a Reply


Copyright © The Web Design Resource. All rights reserved. | Contact Us | Privacy Policy