CSS 2D Transforms

In this advanced CSS tutorial, we will be going to cover the 2-D transform properties and its values. By the end of this CSS tutorial, you will be able to create 2-D effects on a specified element.

CSS 2D Transforms

In CSS, we have a property called transform , which allows us to move, scale, rotate, and skew specific elements. <Note> Old versions of browsers do not support the transform property, make sure that you have the latest version of your browser.

Transform values or methods

The transform value can accept 9 values which are also known as transform methods

  • translate()
  • rotate()
  • scale()
  • scaleX()
  • scaleY()
  • skew()
  • skewX()
  • skewY()
  • matrix()

CSS Transform Property translate() method

The translate() method can shift an element from its actual position, it accepts two parameters which represent the x-axis and y-axis.

Syntax 

{transform:translate(x-axis, y-axis)}

Example

Let’s move a <div> element 60px to the right and 110px to down from its current position 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
                transform: translate(60px, 110px);
            }
        </style>
    </head>
<body>
    <div>Moved Box</div>
</body>
</html>

CSS Transform Property rotate() Method

The rotate() method rotates the element box with a specified angle. It accepts a degree value as a parameter. If the degree value is positive the box rotates clockwise, if the degree value is negative the box rotates anti-clock wise.

Syntax 

{transform: rotate(deg)}

Example

Rotate an element box 45deg 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
                transform: rotate(45deg);
            }
        </style>
    </head>
<body>
    <div>Rotated Box</div>
</body>
</html>

Transform property scale method

As the name suggests, the scale() method can increase and decreases the dimensions of the element box. It accepts two values as parameter scale(x, y) , then it increases the box width by x times and box height by y times. If the values are smaller than 1, then it decreases the size of the box.

Syntax 

{transform: scale(x,y);}

Example

Let’s scale the size of by increasing its width 2 time and height 4 times 

<!DOCTYPE html
<html>
    <head>
        <style>
            div{
                margin:70px;
                width: 100px;
                height:25px;
                background-color: red;
                border: 2px solid black;
                transform: scale(2,4);
            }
        </style>
    </head>
<body>
    <div>Scaled Box</div>
</body>
</html>

CSS transform property scaleX method

The scaleX() method is used to increase and decrease the width of an element box, it is a sub-value of scale() which only deals with width length.

Syntax 

{transform: scaleX(width-scale);}

Example let’s half the element box width. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
                transform: scaleX(0.5);
            }
        </style>
    </head>
<body>
    <div>Scaled Box width</div>
</body>
</html>

CSS Transform Property scaleY method

The scaleY() method is used to increase and decrease the height of an element.

Syntax: 

 {  transform: scaleY(scaled-height);}

Example

Decrease the size of the element box when the user hovers over the element. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
            }
            div:hover{
                transform: scaleY(0.5);
            }
        </style>
    </head>
<body>
    <div>Hover Over Me</div>
</body>
</html>

CSS transform property skew() method

The skew() method accepts two degree parameters for X-axis and Y-axis, and slant or skew the element box according to the specified degree.

Syntax 

{
  transform: skew(x-degree, y-degree);
}

Example

let’s skew an element box 20degree to the x-axis and 40degeree to the y-axis when the user hovers over the element. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
            }
            div:hover{
                transform: skew(20deg, 40deg);
            }
        </style>
    </head>
<body>
    <div>Hover Over Me</div>
</body>
</html>

Transform property skewX method

The skewX() method skews the element box along the specified X angle.

Example

skew the element box 20 degree along x-axis when the user hovers over the element. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
            }
            div:hover{
                transform: skew(20deg, 40deg);
            }
        </style>
    </head>
<body>
    <div>Hover Over Me</div>
</body>
</html>

Transform Property skewY method

The skewY() method skews the element box along the specified angle of Y-degree.

Example

skew the element box 40 degrees along Y-axis when the user hovers over the element. 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
            }
            div:hover{
                transform: skewY(40deg);
            }
        </style>
    </head>
<body>
    <div>Hover Over Me</div>
</body>
</html>

CSS transform Matrix method

The matrix() method is a shorthand value for all the above transform methods. Using this single method we can rotate, translate, scale, and skew an element box.

Syntax 

{transform:matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())}

Example 

<!DOCTYPE html>
<html>
    <head>
        <style>
            div{
                width: 100px;
                height:100px;
                background-color: red;
                border: 2px solid black;
            }
            div:hover{
                transform:  matrix(1, -0.3, 0, 1, 0, 2);
            }
        </style>
    </head>
<body>
    <div>Hover Over Me</div>
</body>
</html>

Summary

  • The transform property allows us to provide an effect on the element as a 2D object.
  • It accepts 9 values which are known as transform methods.
  • translate(x,y) method moves the element along the x and y-axis from its actual position.
  • scale(x,y) method scales the element width by x times and height by y times.
  • rotate(a) method rotates the element box with the angle a.
  • skew(x,y) slant the element box along the x-axis and y-axis
  • matrix(a,b,c,d,e,f) is a shorthand method for all the other transform values.
Previous Tutorial Next Tutorial