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:

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

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.

transform: translateX() - moves an element right/left on x-axis
transform: translateY() - moves an element up/down on y-axis
transform: translateZ() - moves an element front/back on z-axis
transform: translate(x, y) - moves an element right/left on x-axis and up/down on y-axis, at once
transform: translate3d(x, y, z) - moves an element right/left on x-axis, up/down on y-axis, and front/back on z-axis, at once
transform: scaleX() - resizes an element on x-axis
transform: scaleY() - resizes an element on y-axis
transform: scaleZ() - resizes an element on z-axis
transform: scale(x, y) - resizes an element on x-axis and y-axis, at once
transform: scale3d(x, y, z) - resizes an element on x-axis, y-axis, and z-axis, at once
transform: rotateX() - rotates an element along x-axis
transform: rotateY() - rotates an element along y-axis
transform: rotateZ() - rotates an element along z-axis
transform: rotate() - rotates an element on the plane
transform: rotate3d(x, y, z, angle) - rotates an element along x-axis, y-axis, and z-axis, at once, with a particular degree
transform: skewX() - skews an element horizontally
transform: skewY() - skews an element vertically
transform: skew(xAngle, yAngle) - skews an element horizontally and vertically both at once
matrix(a, b, c, d, e, f) - scale, skew, and translate an element on both x-axis and y-axis, at once
matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4) - used to apply a 3D transformation as a 4x4 homogeneous matrix, to an element

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">fresherearth</div>

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

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

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

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

Output

transform: rotate(45deg)

fresherearth

transform: skewX(45deg)

fresherearth

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

fresherearth

transform: rotate(0.5turn)

fresherearth

transform: skew(20deg, 20deg)

fresherearth

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:

CSS Online Test

« Previous Tutorial Next Tutorial »