Categories
CSS Web development

CSS 3D Transforms

CSS also supports 3D transformations by using the CSS transform property.

CSS 3d transforms

With the CSS transform property you can use the following 3D transformation methods:

  1. rotateX()
  2. rotateY()
  3. rotateZ()

Hover over the squares to see the effect:

RotateX
RotateY
RotateZ

RotateX()

The rotateX method rotates an element around its X-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateX-example {
        display: flex;
    }
.n-div, .rotateX {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateX {
  transform: rotateX(150deg);
}
</style>
</head>
<body>
    
<div class="rotateX-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateX">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

RotateY()

The rotateY() method rotates an element around its Y-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateY-example {
        display: flex;
    }
.n-div, .rotateY {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateY {
  transform: rotateY(150deg);
}
</style>
</head>
<body>
    
<div class="rotateY-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateY">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

RotateZ()

The rotateZ() method rotates an element around its Z-axis at a given degree:

<!DOCTYPE html>
<html>
<head>
<style>
.rotateZ-example {
        display: flex;
    }
.n-div, .rotateZ {
  width: 120px;
  height: 120px;
  background-color: #2a9d8f;
  margin:30px;
}

.rotateZ {
  transform: rotateZ(150deg);
}
</style>
</head>
<body>
    
<div class="rotateZ-example">
<div class="n-div">
This a normal div element.</div>

<div class="rotateZ">
This div element is rotated 150 degrees.
</div></div>

</body>
</html>

Output:

This a normal div element.
This div element is rotated 150 degrees.

Enjoy coding!