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