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:
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:
