CSS 2D Transformation

We can perform basic transform manipulations such as move, rotate, scale and skew on elements in a two-dimensional space.

It is an effect that is used to change shape, size and position. There are two type of transformation i.e. 2D and 3D transformation supported in CSS3.

A transformed element doesn’t affect the surrounding elements, but can overlap them, just like the absolutely positioned elements.


Transformation Method

This method is used to re-change the structure of the element as translate, rotate, scale and skew etc.

FormatDescription
translate(x,y)used to transform the element along X-axis and Y-axis
translateX(n)used to transform the element along X-axis
translateY(n)used to transform the element along Y-axis.
Rotate()  used to rotate the element on the basis of an angle
scale(x,y)used to change the width and height of an element
scaleX(n)used to change the width of an element
scaleY(n)used to change the height of an element
skewX()specifies the skew transforms along with X-axis
skewY()specifies the skew transforms along with Y-axis
matrix() specifies matrix transforms

translate() method

This method is used to move an element from its current position according to the given parameters i.e. X-axis and Y-axis.

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;  
    -ms-transform: translate(100px,80px); 
    -webkit-transform: translate(100px,80px); 
    transform: translate(100px,80px); 
}

Output:-


rotate() method

This method is used to rotate an element clockwise or anti-clockwise 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;  
    -ms-transform: rotate(30deg); 
    -webkit-transform: rotate(30deg);  
    transform: rotate(30deg);
}

Output:-


scale() method

This method is used to increase or decrease the size of an element according to the given width and height.

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;  
    -ms-transform: scale(2.5,2); /* IE 9 */  
    -webkit-transform: scale(2.5,2); /* Safari */  
    transform: scale(2.5,2); /* Standard syntax */ 
}

Output:-


skewX() method

This method is used to skew an element along the X axis according to the given angle.

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;  
    -ms-transform: skewX(30deg); 
    -webkit-transform: skewX(30deg); 
    transform: skewX(30deg);  
}

Output:-


skewY() method

This method is used to skew an element along the Y axis according to the given angle.

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;  
    -ms-transform: skewY(30deg); 
    -webkit-transform: skewY(30deg); 
    transform: skewY(30deg);  
}

Output:-


skew() method

This method is used to skew an element along with X-axis and Y-axis according to the given angle.

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;  
    -ms-transform: skew(30deg,20deg); 
    -webkit-transform: skew(30deg,20deg);  
    transform: skew(30deg,20deg);
}

Output:-


matrix() method

This method combines all the six 2D transform methods altogether. It allows you to rotate, scale, translate, and skew elements.

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;  
    -ms-transform: matrix(1, 0, 0.5, 1, 150, 0); 
    -webkit-transform: matrix(1, 0, 0.5, 1, 150, 0);
    transform: matrix(1, 0, 0.5, 1, 150, 0); 
}

Output:-