#3d Archives - Lena Design

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

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

rotateX()
rotateY()
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!