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 types 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.

CSS 2D Transformation allows us to manipulate elements in a two-dimensional space by applying basic transformations such as move, rotate, scale, and skew.

These transformations can be used to change the shape, size, and position of elements. CSS3 supports both 2D and 3D transformations.

When applying a 2D transformation to an element, it doesn't affect the surrounding elements but can overlap them, similar to absolutely positioned elements.

By utilizing CSS 2D Transformation, we can create visually dynamic effects and animations on elements, enhancing the overall user experience of a webpage.

Transformation Method

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

Format	Description
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);

}

Test Yourself

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);

}

Test Yourself

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 */

}

Test Yourself

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);

}

Test Yourself

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);

}

Test Yourself

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);

}

Test Yourself

Output:-

matrix() method

This method combines all 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);

}

Test Yourself

Output:-

Help Us to Improve our content

Let's Talk

CSS 2D Transformation

Transformation Method

translate() method

rotate() method

scale() method

skewX() method

skewY() method

skew() method

matrix() method

Help Us to Improve our content

Important Links

Company

Others

Explore

CSS 2D Transformation

Transformation Method

translate() method

rotate() method

scale() method

skewX() method

skewY() method

skew() method

matrix() method

Help Us to Improve our content

Important Links

Follow us on social :

Company

Others

Explore

Subscribe to Our News Letter!

Follow us on social :