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 »



Like/Share Us on Facebook 😋