css3动画transform与transition应用

首先设置transition属性transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */1，水平移动transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%);2，垂直移动
transform: translateX(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);
3，水平垂直居中position: absolute;
top: 50%;
left: 50%;

transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-o-transform: translateX(-50%);

transform: translateY(-50%);
-ms-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
-o-transform: translateY(-50%);

4，旋转rotate3d(x,y,z,angle)transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-moz-transform:rotate(7deg); /* Firefox */
-webkit-transform:rotate(7deg); /* Safari 和 Chrome */
-o-transform:rotate(7deg); /* Opera */5，skin斜切skew(x-angle,y-angle)
transform: skew(10deg,10deg);
-ms-transform: translateX(10deg,10deg);
-moz-transform: translateX(10deg,10deg);
-webkit-transform: translateX(10deg,10deg);
-o-transform: translateX(10deg,10deg);