css3過渡位移特效

css3過渡特效，或者2d/3d轉換過渡特效。
css3轉換特效：translate()位移、rotate() 旋轉、scale()縮放、skew()翻轉、matrix()組合方法。
過渡位移特效：
css代碼：

.transiton1{
    width: 100px;height: 100px;background-color: red;
    position: absolute;top: 200px;left: 200px;
    transition:transform 1s ease-out;
    -moz-transition: -moz-transform 1s ease-out; /* Firefox 4 */
    -webkit-transition: -webkit-transform 1s ease-out; /* Safari and Chrome */
    -o-transition:-o-transform 1s ease-out; /* Opera */
}
.transiton1:hover{
    transform:translate3d(0,-30px,0);
    -moz-transform:translate3d(0,-30px,0); /* Firefox 4 */
    -webkit-transform:translate3d(0,-30px,0); /* Safari and Chrome */
    -o-transform:translate3d(0,-30px,0); /* Opera */
}