CSS3 3D Transforms: RotateZ() Method

The rotateZ() method rotates an element around its Z-axis at a given degree. This is the syntax:

transform: rotateZ(55deg);

HTML file: Displayed by browser:
<style>
div {
    width: 300px;
    height: 100px;
    background-color: yellow;
    border: 1px solid black;
}
div#myDiv55 {
    -webkit-transform: rotateZ(55deg); /* Safari */
    transform: rotateZ(55deg);
}
div#myDiv90 {
    -webkit-transform: rotateZ(90deg); /* Safari */
    transform: rotateZ(90deg);
}
div#myDiv180 {
    -webkit-transform: rotateZ(180deg); /* Safari */
    transform: rotateZ(180deg);
}
</style>
<body>
<div>
This a normal div element.
</div>
<br /><br /><br /><br /><br />
<div id="myDiv55">
<b>RotateZ(55deg):</b>
This div element is rotated 55 degrees around the Z-axis.
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="myDiv90">
<b>RotateZ(90deg):</b>
This div element is rotated 90 degrees around the Z-axis.
</div>
<br /><br /><br /><br /><br /><br />
<div id="myDiv180">
<b>RotateZ(180deg):</b>
This div element is rotated 180 degrees around the Z-axis.
</div>
</body>
This a normal div element.





RotateZ(55deg): This div element is rotated 55 degrees around the Z-axis.








RotateZ(90deg): This div element is rotated 90 degrees around the Z-axis.






RotateZ(180deg): This div element is rotated 180 degrees around the Z-axis.

Note: Internet Explorer 9 (and earlier versions) does not support the rotateZ() method.

Back button Table of Contents Next button