CSS 2D Transforms

The transformation of an element on x-axis, y-axis, or on the plane, comes under the category of 2D tranforms. 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 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 right/left on x-axis
translateY() - moves an element up/down on y-axis
translate() - moves an element right/left on x-axis and up/down on y-axis, at once
scaleX() - resizes an element on x-axis
scaleY() - resizes an element on y-axis
scale() - resizes an element on x-axis and y-axis, at once
rotateX() - rotates an element along x-axis
rotateY() - rotates an element along y-axis
rotate() - rotates an element on the plane
skewX() - skews an element horizontally
skewY() - skews an element vertically
skew() - skews an element horizontally and vertically both at once
matrix() - scale, skew, and translate an element on both x-axis and y-axis, 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 »