Wednesday, September 7, 2011

Advanced CSS3 Tutorial 10: 3D Transforms


CSS3 allows you to format your elements using 3D transforms.
At the time of writing this is only supported by Chrome and Safari which use the prefix '-webkit-'.

The rotateX() Method
With the rotateX() method, the element rotates around its X-axis at a given degree.

div
{
transform: rotateX(120deg);
-webkit-transform: rotateX(120deg); /* Safari and Chrome */
}

The rotateY() Method
With the rotateY() method, the element rotates around its Y-axis at a given degree.

div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari and Chrome */
}


1 comment: