CSS 3D Transformation

CSS Tutorial

CSS Advanced

CSS Responsive

CSS Grid

CSS 3D Transforms

The CSS transform property allows you to use the following 3D transformation methods:

  • rotateX()
  • rotateY()
  • rotateZ()

The rotateX() Method

The rotateX() method is used to rotate an element around its X-axis at a given degree:

HTML
				
					<h1>The rotateX() Method</h1>
<p>The rotateX() method rotates an element around its X-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
CSS
				
					div {
  width: 300px;
  height: 100px;
  background-color: grey;
  border: 1px solid black;
}

#myDiv {
  transform: rotateX(150deg);
}

Output

rotatex

The rotateY() Method

The rotateY() method is used to rotate an element around its Y-axis at a given degree:

HTML
				
					<h1>The rotateY() Method</h1>
<p>The rotateY() method rotates an element around its Y-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 150 degrees.
</div>
CSS
				
					div {
  width: 300px;
  height: 100px;
  background-color: grey;
  border: 1px solid black;
}

#myDiv {
  transform: rotateY(150deg);
}

Output

The rotateZ() Method

The rotateZ() method is used to rotate an element around its Z-axis at a given degree:

HTML

				
					<h1>The rotateZ() Method</h1>
<p>The rotateZ() method rotates an element around its Z-axis at a given degree.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated 90 degrees.
</div>
CSS
				
					div {
  width: 300px;
  height: 100px;
  background-color: grey;
  border: 1px solid black;
}

#myDiv {
  transform: rotateZ(90deg);
}

Output