Child

CSS3 3D Transforms


« Previous Next Chapter »

transform is such a property of CSS3, which is used for changing the actual form of the element. With this feature ofCSS3 You can change the shape, size and position of an element.

3D Transform is such an amazing feature of CSS3 Transform, which is used for the following methods.

  • rotateX()
  • rotateY()


rotateX() Method: With the help of this method you can rotate your object towards X-axis at given degree.

roted

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateX(120deg);
-webkit-transform:rotateX(120deg); /* Safari and Chrome */
-moz-transform:rotateX(120deg); /* Firefox */
}

rotateY() Method: With the help of this method you can rotate your object towards Y-axis at given degree.

roted

Here is the code:

div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:rotateY(130deg);
-webkit-transform:rotateY(130deg); /* Safari and Chrome */
-moz-transform:rotateY(130deg); /* Firefox */
}