Transform

by Petra1999

HTML

<div class="wrapper">

  <div class="square" id="one">1 translate</div>
  <div class="square" id="two">2 scale</div>
  <div class="square" id="three">3 skew</div>
  <div class="square" id="four">4 multiple</div>
  <div class="square" id="five">5 rotate</div>
  <div class="square" id="six">6 rotate origin</div>
  <div class="square" id="seven">7 rotate 3D</div>
  <div class="square" id="eight">8 rotate 3D no backside</div>
  <div id="box"><div class="square" id="nine">9 rotate perspective</div></div>

</div>

<br>
<ul>
  <li>hover over the squares</li>
  <li>made by <a href="http://cloudythms.tumblr.com/">cloudythms</a></li>
</ul>

CSS

#one:hover {
/* transform: translate(-10px); 
   transform: translate(-10px, -10px);
   transform: translateX(-10px);
   transform: translateY(-10px); */
   /* left-right, up-down */
   
  -webkit-transform: translate(-10px); 
      -ms-transform: translate(-10px); 
          transform: translate(-10px); 
}

#two:hover {
/* transform: scale(1.2); 
   transform: scale(1.2, 1.2);
   transform: scaleX(1.2);
   transform: scaleY(1.2); */
   
  -webkit-transform: scale(1.2); 
      -ms-transform: scale(1.2); 
          transform: scale(1.2); 
}

#three:hover {
/* transform: skew(20deg); 
   transform: skew(20deg, 20deg);
   transform: skewX(20deg);
   transform: skewY(20deg); */
   
  -webkit-transform: skew(20deg); 
      -ms-transform: skew(20deg); 
          transform: skew(20deg); 
}

#four:hover {
  /* matrix( scaleX , skewY , skewX , scaleY , translateX , translateY ) */
  -webkit-transform: matrix(1.2, 0, 0, 1.2, 25, 25);
      -ms-transform: matrix(1.2, 0, 0, 1.2, 25, 25);
          transform: matrix(1.2, 0, 0, 1.2, 25, 25);
}



#five:hover {
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
}

#six:hover {
  -webkit-transform: rotate(20deg);
      -ms-transform: rotate(20deg);
          transform: rotate(20deg);
          
  -webkit-transform-origin:0% 0%;
      -ms-transform-origin:0% 0%;
          transform-origin:0% 0%;
   
   /* 
      0%     0% = origin is left top corner
      0%   100% = origin is left bottom corner
      100%   0% = origin is right top corner
      100% 100% = origin is right bottom corner
   */
}




#seven:hover {
  -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
}



#eight:hover {
  -webkit-transform: rotateY(180deg);
      -ms-transform: rotateY(180deg);
          transform: rotateY(180deg);
   backface-visibility: hidden;
}




#nine:hover{
  -webkit-transform: rotateY(180deg);
      -ms-transform:...