CSS3 3D Transforms: RotateY() Method

Rotate Y

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

transform: rotateY(55deg);

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

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

RotateY(120deg): This div element is rotated 120 degrees around the Y-axis.

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

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

Back button Table of Contents Next button