CSS 2D Transforms

By | October 18, 2020

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.

Vamware

<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.

 

Leave a Reply

Your email address will not be published. Required fields are marked *