CSS 3D Transformation

This type of transformation facilitates us to move an element to X-axis, Y-axis and Z-axis.

  1. Transformation Method

Following are the different transformation method supported by CSS:-

FormatDescription
translate(x,y)used to transform the element along X-axis and Y-axis
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)It specifies 3D translation, using only the value for the X-axis.
translateY(y)It specifies 3D translation, using only the value for the Y-axis.
translateZ(z)It specifies 3D translation, using only the value for the Z-axis.
scale3D(x,y,z)It specifies 3D scale transformation
scaleX(x)It specifies 3D scale transformation by giving a value for the X-axis.
scaley(y)It specifies 3D scale transformation by giving a value for the Y-axis.
scaleZ(z)It specifies 3D scale transformation by giving a value for the Z-axis.

rotateX() method

This method is used to rotate an element around its X-axis according to the given degree.

Input:-

Index.html
	
<body>   
    <p class=”translateSection”>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
      </p> 
</body>
Style.css
.translateSection {  
    width: 300px;  
    height: 100px;  
    background-color: lightgreen;  
    border: 1px solid black;  
    -webkit-transform: rotateX(150deg); /* Safari */  
    transform: rotateX(150deg);
}

Output:-


rotateY() method

This method is used to rotate an element around its Y-axis according to the given degree.

Input:-

Index.html
	
<body>   
    <p class=”translateSection”>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
      </p> 
</body>
Style.css
.translateSection {  
    width: 300px;  
    height: 100px;  
    background-color: lightgreen;  
    border: 1px solid black;  
    -webkit-transform: rotateX(150deg); /* Safari */  
    transform: rotateX(150deg);
}

Output:-


rotateZ() method

This method is used to rotate an element around its Z-axis according to the given degree.

Input:-

Index.html
	
<body>   
    <p class=”translateSection”>   
         Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, here', making it look like readable English. Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. 
      </p> 
</body>
Style.css
.translateSection {  
    width: 300px;  
    height: 100px;  
    background-color: lightgreen;  
    border: 1px solid black;  
    -webkit-transform: rotateZ(90deg); /* Safari */  
    transform: rotateZ(90deg);
}

Output:-