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 a vertical menu that uses the "transform:translate()" selector to animate a menu when the mouse hovers over it.

Example of Menu With transform:translate() (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>
            .menu a
            {
                text-decoration:none;
            }

            .menu ul li span, /* span is used to identify drop-down title */
            .menu a
            {
                display:block;      /* Expand hyperlink to fill container*/
                background-color:#61c6f0;
                color:#ccc;    
            }

            .menu ul li:hover span,
            .menu a:hover,
            .menu a:active
            {
                background-color:#ddd;
                color:#0ac;
            }

            .menu ul
            {
                list-style:none;  /* Remove the bullet from list items */
                padding:0px;   /* Remove default padding from list items */
                margin:0px;
            }

            .menu li
            {
                width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
                text-align:center;  /* Not needed for either menu. */
            }

            .menu.horizontal li
            {
                display:inline-block;  /* Force list items onto same line. */
                float:left;            /* Force list items tight together. */
            }

            .menu.vertical li
            {
                display:block;   /* Force list items onto seperate lines. */
            }

            .menu.vertical ul li:hover span,
            .menu.vertical a:hover,
            .menu.vertical a:active
            {
                transform:translate(10px,0px);
            }
        </style>
    </head>

    <body>
        <div class="vertical menu">
            <ul>
                <li><a href="home/home.html">Home</a></li>
                <li><a href="about_us/about_us.html">About Us</a></li>  
                <li><a href="about_us/about_us.html">Products</a></li>  
            </ul>
        </div>
    </body>
</html>

transform:scale() Selector

The following example displays a vertical menu that uses the "transform:translate()" selector to animate a menu when the mouse hovers over it.

Example of Menu With transform:translate() (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>
            .menu a
            {
                text-decoration:none;
            }

            .menu ul li span, /* span is used to identify drop-down title */
            .menu a
            {
                display:block;      /* Expand hyperlink to fill container*/
                background-color:#61c6f0;
                color:#ccc;    
            }

            .menu ul li:hover span,
            .menu a:hover,
            .menu a:active
            {
                background-color:#ddd;
                color:#0ac;
            }

            .menu ul
            {
                list-style:none;  /* Remove the bullet from list items */
                padding:0px;   /* Remove default padding from list items */
                margin:0px;
            }

            .menu li
            {
                width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
                text-align:center;  /* Not needed for either menu. */
            }

            .menu.horizontal li
            {
                display:inline-block;  /* Force list items onto same line. */
                float:left;            /* Force list items tight together. */
            }

            .menu.vertical li
            {
                display:block;   /* Force list items onto seperate lines. */
            }

            .menu.vertical ul li:hover span,
            .menu.vertical a:hover,
            .menu.vertical a:active
            {
                transform:scale(1.2,1);
            }
        </style>
    </head>

    <body>
        <div class="vertical menu">
            <ul>
                <li><a href="home/home.html">Home</a></li>
                <li><a href="about_us/about_us.html">About Us</a></li>  
                <li><a href="about_us/about_us.html">Products</a></li>  
            </ul>
        </div>
    </body>
</html>

transform:rotate() Selector

The following example displays a vertical menu that uses the "transform:translate()" selector to animate a menu when the mouse hovers over it.

Example of Menu With transform:translate() (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>
            .menu a
            {
                text-decoration:none;
            }

            .menu ul li span, /* span is used to identify drop-down title */
            .menu a
            {
                display:block;      /* Expand hyperlink to fill container*/
                background-color:#61c6f0;
                color:#ccc;    
            }

            .menu ul li:hover span,
            .menu a:hover,
            .menu a:active
            {
                background-color:#ddd;
                color:#0ac;
            }

            .menu ul
            {
                list-style:none;  /* Remove the bullet from list items */
                padding:0px;   /* Remove default padding from list items */
                margin:0px;
            }

            .menu li
            {
                width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
                text-align:center;  /* Not needed for either menu. */
            }

            .menu.horizontal li
            {
                display:inline-block;  /* Force list items onto same line. */
                float:left;            /* Force list items tight together. */
            }

            .menu.vertical li
            {
                display:block;   /* Force list items onto seperate lines. */
            }

            .menu.vertical ul li:hover span,
            .menu.vertical a:hover,
            .menu.vertical a:active
            {
                transform:rotate(10deg);
            }
        </style>
    </head>

    <body>
        <div class="vertical menu">
            <ul>
                <li><a href="home/home.html">Home</a></li>
                <li><a href="about_us/about_us.html">About Us</a></li>  
                <li><a href="about_us/about_us.html">Products</a></li>  
            </ul>
        </div>
    </body>
</html>

transform:skew() Selector

The following example displays a vertical menu that uses the "transform:translate()" selector to animate a menu when the mouse hovers over it.

Example of Menu With transform:translate() (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>
            .menu a
            {
                text-decoration:none;
            }

            .menu ul li span, /* span is used to identify drop-down title */
            .menu a
            {
                display:block;      /* Expand hyperlink to fill container*/
                background-color:#61c6f0;
                color:#ccc;    
            }

            .menu ul li:hover span,
            .menu a:hover,
            .menu a:active
            {
                background-color:#ddd;
                color:#0ac;
            }

            .menu ul
            {
                list-style:none;  /* Remove the bullet from list items */
                padding:0px;   /* Remove default padding from list items */
                margin:0px;
            }

            .menu li
            {
                width:80px;     /* width for each list item. Not absolutely necessary for horizontal menus. */
                text-align:center;  /* Not needed for either menu. */
            }

            .menu.horizontal li
            {
                display:inline-block;  /* Force list items onto same line. */
                float:left;            /* Force list items tight together. */
            }

            .menu.vertical li
            {
                display:block;   /* Force list items onto seperate lines. */
            }

            .menu.vertical ul li:hover span,
            .menu.vertical a:hover,
            .menu.vertical a:active
            {
                transform:skew(20deg, 5deg);
            }
        </style>
    </head>

    <body>
        <div class="vertical menu">
            <ul>
                <li><a href="home/home.html">Home</a></li>
                <li><a href="about_us/about_us.html">About Us</a></li>  
                <li><a href="about_us/about_us.html">Products</a></li>  
            </ul>
        </div>
    </body>
</html>

Perspective

It is better to 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>