/    /  CSS 3D Transforms

CSS 3D Transforms

 

The CSS 3D transforms facilitate you to move an element to X-axis, Y-axis, and Z-axis. Following is a list of 3D transforms methods.

 

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

 

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

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color: lightpink;
  border: 1px solid black;
color:white;
}
div#myDiv {
  -webkit-transform: rotateX(150deg); /* Safari */
  transform: rotateX(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
This is I2Tutorials
</div>
<div id="myDiv">
This is I2Tutorials
</div>
</body>
</html>

 

OUTPUT:

 

CSS 3D Transforms

 

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

 

<!DOCTYPE html>
<html>
<head>
<style>
div {
  width: 300px;
  height: 100px;
  background-color:lightpink;
  border: 1px solid black;
}

div#myDiv {
  -webkit-transform: rotateY(150deg); /* Safari */
  transform: rotateY(150deg); /* Standard syntax */
}
</style>
</head>
<body>
<div>
Welcome to I2Tutorials.
</div>
<div id="myDiv">
Welcome to I2Tutorials.
</div>
</body>
</html>

 

OUTPUT:

 

CSS 3D Transforms