<h1>CSS3 2D Transform examples (on <kbd>:hover</kbd>)</h1>
<div class="wrap"><div class="one"><kbd>translateX(20px)</kbd></div></div>
<div class="wrap"><div class="two"><kbd>translateY(-20px)</kbd></div></div>
<div class="wrap"><div class="three"><kbd>translate(-20px, 20px)</kbd></div></div>
<div class="wrap"><div class="four"><kbd>scaleX(-1)</kbd></div></div>
<div class="wrap"><div class="five"><kbd>scaleY(1.2)</kbd></div></div>
<div class="wrap"><div class="six"><kbd>scale(1.2, 0.5)</kbd></div></div>
<div class="wrap"><div class="seven"><kbd>rotate(720deg)</kbd></div></div>
<div class="wrap"><div class="eight"><kbd>skewX(20deg)</kbd></div></div>
<div class="wrap"><div class="nine"><kbd>skewY(-20deg)</kbd></div></div>
<div class="wrap"><div class="ten"><kbd>skew(-20deg, 20deg)</kbd></div></div>
<div class="wrap"><div class="eleven"><kbd>matrix(1.2,0,0.5,1.2,50,0)</kbd></div></div>

* {box-sizing: border-box;}
body {font-family: 'Playfair Display', serif; margin: 0;text-align: center}
h1 {font-weight: normal;color: #6A5953}
kbd {font-size: 0.9em;display:inline-block;line-height:1.1;}
.wrap {
  display: inline-block;
  margin: 0 40px 2em 0;
  background: rgba(228, 225, 228, .5);
}
div {
  width: 170px;
  height: 100px;
  line-height: 100px;
  margin: 0 auto;
  -o-transition: all 0.5s ease-in-out;
  -moz-transition: all 0.5s ease-in-out;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}
.one, .four, .seven, .ten {
  background: rgba(135, 86, 120, .4);
}
.one:hover {
  -o-transform: translateX(20px);
  -ms-transform: translateX(20px);
  -moz-transform: translateX(20px);
  -webkit-transform: translateX(20px);
  transform: translateX(20px);
}
.two, .five, .eight, .eleven {
  background: rgba(0, 228, 246, .4);
}
.two:hover {
  -o-transform: translateY(-20px);
  -ms-transform: translateY(-20px);
  -moz-transform: translateY(-20px);
  -webkit-transform: translateY(-20px);  
  transform: translateY(-20px);
}
.three, .six, .nine {
  background: rgba(255, 153, 0, .4);
}
.three:hover {
  -o-transform: translate(-20px, 20px);
  -ms-transform: translate(-20px, 20px);
  -moz-transform: translate(-20px, 20px);
  -webkit-transform: translate(-20px, 20px);
  transform: translate(-20px, 20px);
}
.four:hover {
  -o-transform: scaleX(-1);
  -ms-transform: scaleX(-1);
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}
.five:hover {
  -o-transform: scaleY(1.2);
  -ms-transform: scaleY(1.2);
  -moz-transform: scaleY(1.2);
  -webkit-transform: scaleY(1.2);
  transform: scaleY(1.2);
}
.six:hover {
  -o-transform: scale(1.2, 0.5);
  -ms-transform: scale(1.2, 0.5);
  -moz-transform: scale(1.2, 0.5);
  -webkit-transform: scale(1.2, 0.5);
  transform: scale(1.2, 0.5);
}
.seven:hover {
  -o-transform: rotate(720deg);
  -ms-transform: rotate(720deg);
  -moz-transform: rotate(720deg);
  -webkit-transform: rotate(720deg);
  transform: rotate(720deg);
}
.eight:hover {
  -o-transform: skewX(20deg);
  -ms-transform: skewX(20deg);
  -moz-transform: skewX(20deg);
  -webkit-transform: skewX(20deg);
  transform: skewX(20deg);
}
.nine:hover {
  -o-transform: skewY(-20deg);
  -ms-transform: skewY(-20deg);
  -moz-transform: skewY(-20deg);
  -webkit-transform: skewY(-20deg);
  transform: skewY(-20deg);
}
.ten:hover {
  -o-transform: skew(-20deg, 20deg);
  -ms-transform: skew(-20deg, 20deg);
  -moz-transform: skew(-20deg, 20deg);
  -webkit-transform: skew(-20deg, 20deg);
  transform: skew(-20deg, 20deg);
}
.eleven:hover {
  -o-transform: matrix(1.2,0,0.5,1.2,50,0);
  -ms-transform: matrix(1.2,0,0.5,1.2,50,0);
  -moz-transform: matrix(1.2,0,0.5,1.2,50,0);
  -webkit-transform: matrix(1.2,0,0.5,1.2,50,0);
  transform: matrix(1.2,0,0.5,1.2,50,0);
}