CSS 3 - Part 3

Go back to CSS 3 - Part 2

Transforming Graphics

The transform property applies 2D and 3D effects such as skew, scale, rotate, and move. Note that the transform property is not an animation tool it simply transforms an element from its original state into a transformed appearance. So for example, if I have a square graphic and I use the transform property to rotate it, my graphic simply appears on the screen in a rotated state (as opposed to moving in a rotated fashion). The following table shows a few possible values you can assign to the transform property.

Note that for most of the following you will need to add the –moz- or –webkit- before the property and include a duplicate line for each different browser you want to accommodate:

div {
       transform: rotateX(120deg);
       -webkit-transform: rotateX(120deg);
       -moz-transform: rotateX(120deg);
       -o-transform: rotateX(120deg);
       -ms-transform: rotateX(120deg);
}

Next - CSS 3 - Part 4