Transform in CSS

What is transform?

  • This property is used to apply the 2D or 3D transformation to an element.

  • This property allows us to rotate, scale, move, skew, etc., HTML elements.


This will be our boilerplate:

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title> Transfor Property in CSS </title>
    <style>

    </style>

</head>
<body>

</body>
</html>


CSS Transform Values

i) none: This value defines that there is no transformation.

div:hover {
    transform: none;
}


ii) translate(x,y): Defines a 2D translation in x-asis and y-axis.

div:hover {
        transform: translate(10px , 20px);
}


iii) translateX(x): Defines a translation, using only the value for the X-axis.

div:hover {
        transform: translateX(34px);
}


iv) translateY(y): Defines a translation, using only the value for the Y-axis

div:hover {
        transform: translateY(34px);
}


v) scale(x,y): Defines a 2D scale transformation.

div:hover {
        transform: scale(2, 5);
}


vi) scaleX(x): Defines a scale transformation by giving a value for the X-axis.

div:hover {
        transform: scaleX(4);
}


vii) scaleY(y): Defines a scale transformation by giving a value for the Y-axis.

div:hover {
        transform: scaleY(4);
}


viii) skew(x-angle,y-angle): Defines a 2D skew transformation along the X-axis and the Y-axis.

div:hover {
        transform: skew(40deg, 34deg);
}


viii) skewX(angle):  Defines a 2D skey transformation along the X-axis.

div:hover {
        transform: skewX(24deg);
}


viii) skewY(angle):  Defines a 2D skey transformation along the Y-axis.

div:hover {
        transform: skewY(24deg);
}


viii) rotate(angle): Defines a 2D rotation, the angle is specified in the parameter.

div:hover {
       transform: rotate(32deg);
}


viii) rotateX(angle): Defines a 3D rotation along the X-axis.

div:hover {
       transform: rotateX(34deg);
}


viii) rotateY(angle): Defines a 3D rotation along the Y-axis.

div:hover {
        transform: rotateY(34deg);
}


Using Transform Properties

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> Transform in CSS </title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        div {
            height: 100px;
            width: 100px;
            border: 2px solid red;
            transition: all 2s;
        }

        div:hover {
            transform: scale(1.1);
        }
    </style>
</head>
<body>

    <div> </div>

</body>
</html>

Output:

Write this code in your Code Editor and See the output on the browser window.


CSS Transform Property PDF

Download Now

Tags
Raju Sheoran

Raju Sheoran

Hi!, I'm the Founder and Developer of Geeks Help we provide the best Computer or Programming Related Content With Notes PDF, Amazing Designs, Easy to Readable for Learners. linkedin instagram facebook

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad

Ads Section