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