CSS - 2D Transforms

Previous
Quiz
Next

CSS transforms are used to modify the element's shape and sizes and are responsible for movements of elements in two-dimensional space using functions like translate(), scale(), rotate(), and skew(). These functions allow you to move, scale, rotate, and skew elements along the X and Y axes, creating various visual effects and manipulations.

2D Transform
3D Transform

Table of Contents


 

CSS 2D Translate

CSS translate() function moves an element along the X and Y axes.

Example

The following example shows a box that moves along these axes when hovered over.

 <!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Translation */
            transform: translate(50px, 50px);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Translation */
        .box:hover {
            transform: translate(-50px, -50px);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

CSS 2D Rotate

CSS rotate() function rotates an element around a specified point on the 2D plane.

Example

The following example shows a box that rotates when hovered over, creating a dynamic effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Rotation */
            transform: rotate(15deg);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Rotation */
        .box:hover {
            transform: rotate(-15deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

CSS 2D Scale

CSS scale() function scales an element along the X and Y axes.

Example

The following example shows a box that scales up and down when hovered over, creating a zoom effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 150px;
            height: 150px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Scaling */
            transform: scale(1);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Scaling */
        .box:hover {
            transform: scale(1.5);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

CSS 2D Skew

CSS skew() function skews an element along the X and Y axes.

Example

The following example shows a box that skews when hovered over, creating a slanted effect.

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            height: 300px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #f0f0f0;
            font-family: Arial, sans-serif;
        }

        /* The Box Element */
        .box {
            width: 200px;
            height: 200px;
            background-color: #4CAF50;
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5em;
            border-radius: 10px;
            /* Initial 2D Skew */
            transform: skewX(10deg) skewY(10deg);
            transition: transform 0.6s ease;
        }

        /* Hover State with Different 2D Skew */
        .box:hover {
            transform: skewX(-10deg) skewY(-10deg);
            background-color: #2ecc71;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box">
        2D Box
    </div>
</body>

</html>

The following table lists all the various functions that are used to transform elements in the two-dimensional space.

Function Description Example
translate() CSS translate() function translates an element along the X and Y axes.
rotate() CSS rotate() function rotates an element around a point in 2D space.
scale() CSS scale() function scales an element along the X and Y axes.
skew() CSS skew() function skews an element along the X and Y axes.
transform() CSS transform() function applies a 2D or 3D transformation to an element.
Print Page
Previous
Next
Advertisements