CSS Transformations

The following four 2D transformations can be applied in CSS

transform:translate(): Move an element.
transform:scale(): Scale an element.
transform:rotate(): Rotate an element about its centre.
transform:skew(): Skew an element.
Perspective: Apply perspective to an element

The following examples show how each of the above transformations can be used to animate a vertical menu.

transform:translate() Selector

The following example displays text that uses transform:translate() to translate text when the mouse hovers over it.

Example of transform:translate() (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            p
            {
                width:80px;
                background-color:#61c6f0;
                color:#ccc;
                margin:0px;
            }

            p:hover
            {
                cursor:pointer;
                background-color:#ddd;
                color:#0ac;
                transform:translate(10px,0px);
            }
        </style>
    </head>

    <body>
        <div>
            <p>Home</p>
            <p>About Us</p>  
            <p>Products</p>  
        </div>
    </body>
</html>

transform:scale() Selector

The following example displays text that uses transform:scale() to scale text when the mouse hovers over it.

Example of transform:scale() (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            p
            {
                width:80px;
                background-color:#61c6f0;
                color:#ccc;
                margin:0px;
            }

            p:hover
            {
                cursor:pointer;
                background-color:#ddd;
                color:#0ac;
                transform:scale(1.2, 1);
            }
        </style>
    </head>

    <body>
        <div>
            <p>Home</p>
            <p>About Us</p>  
            <p>Products</p>  
        </div>
    </body>
</html>

Adjust the code above, so that the scale originates from the left side and scales toward the right, as shown here.

Adjust the example here , so that each image scales when the mouse hovers over it, as shown here .

We can use scale to invert an element. Adjust the example here , so that each image has a mirror image under it, as shown here . Remove the text that is under each image.

Adjust the example above, so that each image has a mirror image that fades out under it, as shown here . Hint: You will need to place an overlay that fades from transparent to white on top of the images.

transform:rotate() Selector

The following example displays text that uses transform:rotate() to rotate text when the mouse hovers over it.

Example of transform:rotate() (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            p
            {
                width:80px;
                background-color:#61c6f0;
                color:#ccc;
                margin:0px;
            }

            p:hover
            {
                cursor:pointer;
                background-color:#ddd;
                color:#0ac;
                transform:rotate(10deg);
            }
        </style>
    </head>

    <body>
        <div>
            <p>Home</p>
            <p>About Us</p>  
            <p>Products</p>  
        </div>
    </body>
</html>

Adjust the example here , so that each image has a sudo-random rotation, as shown here .

transform:skew() Selector

The following example displays text that uses transform:skew() to skew text when the mouse hovers over it.

Example of transform:skew() (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <meta http-equiv="Content-Language" content="en" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <style>
            p
            {
                width:80px;
                background-color:#61c6f0;
                color:#ccc;
                margin:0px;
            }

            p:hover
            {
                cursor:pointer;
                background-color:#ddd;
                color:#0ac;
                transform:skew(20deg, 5deg);
            }
        </style>
    </head>

    <body>
        <div>
            <p>Home</p>
            <p>About Us</p>  
            <p>Products</p>  
        </div>
    </body>
</html>

Perspective

We can demostrate perspective using text and images, as per the example below.

Example of transform:perspective() (Run Example)

<!doctype html>   
<html>
    <head>
        <title>Course notes example code</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <style>
            body
            {
                background-color:gray;
            }

            .text
            {
                width:300px;
                font-size:50px;
                margin:auto;
                margin-top:150px;
                transform:perspective(500px) rotatex(45deg); 	
            }

            .photogallery ul
            {
                list-style:none;  /* Remove the bullet from list items */

            }

            .photogallery ul li
            {
                text-decoration:none;
                width:200px;     
                display:inline-block;
                float:left;            
                padding:10px;  
                margin:0px; 
                background-color:white;  
                transform:perspective(500px) rotatey(45deg);                    
            }

            div.photogallery ul li img
            {
                width:100%;
            }

            div.photogallery ul li:hover
            {
                z-index:5;
                position:relative;
                transform:perspective(500px) rotateY(0deg);  
            }
        </style>
    </head>

    <body>
        <div class="photogallery">
            <ul>
                <li><img src="images/dkit01.gif"></li>
                <li><img src="images/dkit02.gif"></li>  
                <li><img src="images/dkit03.gif"></li>  
            </ul>
        </div>
        
        <div class = "text">This is an example of text that has perspective applied to it.</div>
    </body>
</html>