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.