CSS 3D Transforms

To move an element relative to all the three-axis, i.e, the X-axis, Y-axis, and Z-axis the CSS 3D transforms are used.

3D transforms methods:

Function Uses
matrix3D(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Used to define a 3D transformation by using a 4×4 matrix of 16 values.
translate3D(x,y,z) Used to define a 3D translation.
translateX(x) Used to define a 3D translation by using only the value for the X-axis.
translateY(y) Used to define a 3D translation by using only the value for the Y-axis.
translateZ(z) Used to define a 3D translation by using only the value for the Z-axis.
scale3D(x,y,z) Used to define a 3D scale transformation.
scaleX(x) Used to define a 3D scale transformation, giving a value for the X-axis.
scaley(y) Used to define a 3D scale transformation, giving a value for the Y-axis.
scaleZ(z) Used to define a 3D scale transformation, giving a value for the Z-axis.
rotate3D(X,Y,Z,angle) Used to define a 3D rotation along with X-axis, Y-axis and Z-axis.
rotateX(angle) Used to define a 3D rotation along with X-axis.
rotateY(angle) Used to define a 3D rotation along with Y-axis.
rotateZ(angle) Used to define a 3D rotation along with Z-axis.
perspective(n) Used to define a perspective view for a 3D transformed element.

Supporting Browsers:

Property Chrome IE Firefox Opera Safari
transform 36.012.0 -webkit- 10 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-
transform-origin(three-value syntax) 36.012.0 -webkit- 10 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-
transform-style 36.012.0 -webkit- 11 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-
perspective 36.012.0 -webkit- 10 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-
perspective-origin 36.012.0 -webkit- 10 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-
backface-visibility 36.012.0 -webkit- 10 16.010.0 -moz- 23.015.0 -webkit- 9.04.0 -webkit-

The 3D rotateX() method (X-axis rotation):

To rotate an element around the X-axis relative to the specified degree, the CSS 3D rotateX() method is used.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 50px;
  padding: 10px;
  background-color: crimson;
  color: white;
  text-align: center;
  border: 5px solid brown;
}
 
#myDiv {
  -webkit-transform: rotateX(200deg);
  transform: rotateX(200deg);
</style>
</head>
<body>
<h1>The rotateX() Method</h1>
<div>
HELLO WORLD!!
</div>
<div id="myDiv">
HELLO WORLD!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we are rotating an element around the X-axis.

The 3D rotateY() method (Y-axis rotation):

To rotate an element around the Y-axis relative to the specified degree, the CSS 3D rotateY() method is used.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 50px;
  padding: 10px;
  background-color: crimson;
  color: white;
  text-align: center;
  border: 5px solid brown;
}
 
#myDiv {
  -webkit-transform: rotateY(200deg);
  transform: rotateY(200deg);
</style>
</head>
<body>
<h1>The rotateY() Method</h1>
<div>
HELLO WORLD!!
</div>
<div id="myDiv">
HELLO WORLD!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we are rotating an element around the Y-axis.

The 3D rotateZ() method (Z-axis rotation):

To rotate an element around the Z-axis relative to the specified degree, the CSS 3D rotateZ() method is used.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 100px;
  height: 50px;
  padding: 10px;
  background-color: crimson;
  color: white;
  text-align: center;
  border: 5px solid brown;
}
 
#myDiv {
  -webkit-transform: rotateZ(90deg);
  transform: rotateZ(90deg);
</style>
</head>
<body>
<h1>The rotateZ() Method</h1>
<div>
HELLO WORLD!!
</div>
<div id="myDiv">
HELLO WORLD!!
</div>
</body>
</html>

Output:

Explanation:

In the above example, we are rotating an element around the Z-axis.

 

Please Share