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

translateX(): moves an element along the x-axis to the right or left.
translateY(): moves an element along the y-axis up and down.
translate(): simultaneously moves an element right or left on the x-axis and up or down on the y-axis.
scaleX(): resizes an element on the x-axis
scaleY(): resizes an element on the y-axis
scale(): resizes an element on both the x and y axes at the same time.
rotateX(): rotates an element along the x-axis
rotateY(): rotates an element along the y-axis.
rotate(): rotates an element on the plane.
skewX(): skews an element horizontally.
skewY(): skews an element vertically.
skew(): skews an element both horizontally and vertically at the same time.
matrix(): scale, skew, and translate an element on both the x- and y-axes at once.

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!