css3动画transform与transition应用

最新推荐文章于 2023-04-23 20:58:35 发布

天空之城tian

最新推荐文章于 2023-04-23 20:58:35 发布

阅读量291

点赞数 1

本文链接：https://blog.csdn.net/tym3515/article/details/79676417

版权

首先设置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);