HTML, CSS and JavaScript playground

<!DOCTYPE html>
<html lang="en">
  <head>
	<meta charset="utf-8">
  <title>
    Liveweave
  </title>
  
  <style type="text/css">

ul  {
        width:40px;
        list-style-type:none;
        padding:0;
        margin:2em auto;
        transform:scale(2);
        transform-origin:top;
      }
      li {
        overflow:hidden;
        width:40px;
        margin:0 0 -40px 0 ;
      }
      li:nth-child(even) {
      }
      a {
        float:left;
        height:80px;
        width:80px;
        background:red;
        margin:0 0 0  -60px  ;
        -moz-transform:rotate(45deg);
        -moz-transform-origin:center;
        -webkit-transform:rotate(45deg);
        -webkit-transform-origin:center;
        transform:rotate(45deg);
        transform-origin:center;
        overflow:hidden;
      }
      a img {
        -moz-transform:rotate(-45deg);
        -moz-transform-origin:center;
        -webkit-transform:rotate(-45deg);
        -webkit-transform-origin:center;
        transform:rotate(-45deg);
        transform-origin:center;
        
        margin:-40px 40px 0 ;
        
      }
      li:nth-child(even) a img {
        margin:40px  0 0 -40px;
      }
      li:nth-child(even) a {
        float:right;
        margin:0 -60px 0 0}
      a:hover {
        background:blue;
        opacity:0.5}
  </style>
  
  
  </head>
  
  
  <body>
    
    <ul>
      <li>
        <a href="#" title="link 1">
          <img src="http://lorempixum.com/80/80/abstract/5"/>
        </a>
      </li>
      <li>
        <a href="#" title="link 2">
          <img src="http://lorempixum.com/80/80/city/4"/>
        </a>
      </li>
      <li>
        <a href="#" title="link 3">
          <img src="http://lorempixum.com/80/80/people/3"/>
        </a>
      </li>
      <li>
        <a href="#" title="link 4">
          <img src="http://lorempixum.com/80/80/animals/6"/>
        </a>
      </li>
      <li>
        <a href="#" title="link 5">
          <img src="http://lorempixum.com/80/80/food/1"/>
        </a>
      </li>
    </ul>
	
  
  </body>
  
</html>