CSS 2D Transforms

The transformation of an element on the x-axis, the y-axis, or on the plane comes under the category of 2D transformations. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div {width: 160px; height: 160px; background-color: chocolate;}
      .b {transform: skewX(20deg);}
   </style>
</head>
<body>
   
   <h2>Normal DIV</h2>
   <div class="a"></div>

   <h2>Transformed DIV by skewX(20deg)</h2>
   <div class="b"></div>
   
</body>
</html>
Output

Normal DIV

Transformed DIV by skewX(20deg)

However, it is not limited to using skewX() only to perform 2D transforms in CSS. There are some other transformation functions that can be used to perform 2D transformations of an element on the web. Those functions are given below.

CSS 2D Transform Functions

CSS 2D Transform Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div {width: 160px; height: 160px; background-color: chocolate;
         color: white; text-align: center;}
      .a {transform: translate(20px, 20px);}
      .b {transform: scale(0.5, 1.3);}
      .c {transform: rotateX(20deg);}
      .d {transform: rotateY(20deg);}
      .e {transform: rotate(20deg, 20deg);}
      .f {transform: skew(20deg, 20deg);}
      .g {transform: matrix(1, 0, 0.8, 1, 140, 10);}
      .h {transform: matrix(-1, 0, 0.8, 1, 140, 10);}
   </style>
</head>
<body>
   
   <h2>transform: translate(20px, -30px)</h2>
   <div class="a">CODESCRACKER</div>

   <h2>transform: scale(2, 1.3)</h2>
   <div class="b">CODESCRACKER</div>

   <h2>transform: rotateX(20deg)</h2>
   <div class="c">CODESCRACKER</div>

   <h2>transform: rotateY(20deg)</h2>
   <div class="d">CODESCRACKER</div>

   <h2>transform: rotate(20deg, 20deg)</h2>
   <div class="e">CODESCRACKER</div>

   <h2>transform: skew(20deg, 20deg)</h2>
   <div class="f">CODESCRACKER</div>

   <h2>transform: matrix(1, 0, 0.8, 1, 140, 10)</h2>
   <div class="g">CODESCRACKER</div>

   <h2>transform: matrix(-1, 0, 0.8, 1, 140, 10)</h2>
   <div class="h">CODESCRACKER</div>
   
</body>
</html>
Output

transform: translate(20px, -30px)

CODESCRACKER

transform: scale(2, 1.3)

CODESCRACKER

transform: rotateX(20deg)

CODESCRACKER

transform: rotateY(20deg)

CODESCRACKER

transform: rotate(20deg, 20deg)

CODESCRACKER

transform: skew(20deg, 20deg)

CODESCRACKER

transform: matrix(1, 0, 0.8, 1, 140, 10)

CODESCRACKER

transform: matrix(-1, 0, 0.8, 1, 140, 10)

CODESCRACKER

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!