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 */
}