2D Transforms

Written by

in

Advanced Features

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 2D Rotate
CSS 2D Scale
CSS 2D Skew
CSS 2D Transform Related Functions

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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


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;
    }
&lt;/style&gt;&lt;/head&gt;&lt;body&gt;&lt;div class="box"&gt;
    2D Box
&lt;/div&gt;&lt;/body&gt;&lt;/html&gt;</pre>


CSS 2D Transform Related Functions



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. Try It
rotate() CSS rotate() function rotates an element around a point in 2D space. Try It
scale() CSS scale() function scales an element along the X and Y axes. Try It
skew() CSS skew() function skews an element along the X and Y axes. Try It
transform() CSS transform() function applies a 2D or 3D transformation to an element. Try It

Comments

Leave a Reply Cancel reply

More posts