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>
<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>
<nav class="horizontal 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="../products/products.html">Products</a></li>  
</ul>
</nav>

<br>
<br>

<nav 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="../products/products.html">Products</a></li>  
</ul>
</nav>

</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>
<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> <nav class="horizontal 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="../products/products.html">Products</a></li> </ul> </nav> <br> <br> <nav 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="../products/products.html">Products</a></li> </ul> </nav> </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>
<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>
<nav class="horizontal 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="../products/products.html">Products</a></li>  
</ul>
</nav>

<br>
<br>

<nav 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="../products/products.html">Products</a></li>  
</ul>
</nav>

</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>
<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> <nav class="horizontal 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="../products/products.html">Products</a></li> </ul> </nav> <br> <br> <nav 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="../products/products.html">Products</a></li> </ul> </nav> </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>
<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
{
    transform: perspective(500px)  rotateY(0deg);            
  
  z-index:5;
    position: relative;
}
</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>
 
<div align="center"><a href="../../versionC/index.html" title="DKIT Lecture notes homepage for Derek O&#39; Reilly, Dundalk Institute of Technology (DKIT), Dundalk, County Louth, Ireland. Copyright Derek O&#39; Reilly, DKIT." target="_parent" style='font-size:0;color:white;background-color:white'>&nbsp;</a></div>