CSS transform

The CSS transform property is used to transform an element from its original state. For example:

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div{width: 160px; height: 120px; background: peru;}
      .b{transform: skewY(22deg);}
   </style>
</head>
<body>
   
   <h2>Without transform</h2>
   <div class="a"></div>

   <h2>With transform: skewY(22deg)</h2>
   <div class="b"></div>
   
</body>
</html>
Output

Without transform

With transform: skewY(22deg)

It is not limited to use only skewY() function to define the transform property, to transform any particular element. The transform property is used to move, resize, rotate, and/or skew etc. an element.

The 3D Vs Plane Coordinates

Before learning the transformation of an element using CSS, first understand the concept of coordinate system, like shown in the snapshot given below:

css transform example 3d figure

Or the following snapshot shows all the three axes using a 3D box:

3d coordinate system

CSS transform Syntax

The syntax of transform property in CSS, is:

transform: transform-functions;

Note - We can use single or multiple transformation functions to define the transform property. The transform-functions, that can be used to define the transform property, are given below.

CSS Tranform Functions List

These are the list of functions that can be used to define the transform property, along with its brief description. To learn about any function, in detail, refer to its separate tutorial.

Note - The three keywords that can also be used to define the transform property, instead of using above listed transform functions, are none, initial, and inherit

Note - The none is used to define no transformation to an element. The initial is used to use the default value, whereas the inherit keyword is used to use the value inherited by the parent element.

CSS transform Example

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      div {width: 160px; height: 160px; background-color: chocolate; margin: 20px auto;
         color: white; text-align: center;}
      .a{transform: rotate(45deg);}
      .b{transform: skewX(45deg);}
      .c{transform: rotate(45deg) skewX(45deg);}
      .d{transform: rotate(0.5turn);}
      .e{transform: skew(20deg, 20deg);}
   </style>
</head>
<body>
   
   <h2>transform: rotate(45deg)</h2>
   <div class="a">CODESCRACKER</div>

   <h2>transform: skewX(45deg)</h2>
   <div class="b">CODESCRACKER</div>

   <h2>transform: rotate(45deg) skewX(45deg)</h2>
   <div class="c">CODESCRACKER</div>

   <h2>transform: rotate(0.5turn)</h2>
   <div class="d">CODESCRACKER</div>

   <h2>transform: skew(20deg, 20deg)</h2>
   <div class="e">CODESCRACKER</div>
   
</body>
</html>
Output

transform: rotate(45deg)

CODESCRACKER

transform: skewX(45deg)

CODESCRACKER

transform: rotate(45deg) skewX(45deg)

CODESCRACKER

transform: rotate(0.5turn)

CODESCRACKER

transform: skew(20deg, 20deg)

CODESCRACKER

These are just demo showing how the transformation of an element using the transform property can be done. You can follow your requirement on your web application, to design the web that looks interactive and elegant.

Types of Transformation in CSS

As I've mentioned all the functions that can be used to define the transform property. But if you want to learn transformation based on 2D and 3D, then follow the separate tutorial on:

  1. 2D Transform
  2. 3D Transform

CSS Online Test


« Previous Tutorial Next Tutorial »