transform:转换
对元素进行移动、缩放、转动、拉长或拉伸。
方法:translate():
元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数
有两个div,它们的css样式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .before { width : 70px ; height : 70px ; background-color : #8fbc8f ; } .after { width : 70px ; height : 70px ; background-color : #ffe4c4 ; -webkit-transform: translate( 50px , 30px ); -moz-transform: translate( 50px , 30px ); -ms-transform: translate( 50px , 30px ); -o-transform: translate( 50px , 30px ); transform: translate( 50px , 30px ); } |
结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/a58a32eb4b3d15422b3cd2e96d5ec869.png)
rotate()
元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
有两个div,它们的css样式如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .before { width : 70px ; height : 70px ; background-color : #8fbc8f ; } .after { width : 70px ; height : 70px ; background-color : #ffe4c4 ; -webkit-transform: rotate( 20 deg); -moz-transform: rotate( 20 deg); -ms-transform: rotate( 20 deg); -o-transform: rotate( 20 deg); transform: rotate( 20 deg); } |
结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/4b4d7c48a40ce116810cf3d8e555d968.png)
scale()
元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数
有两个div,它们的css样式如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .before { width : 70px ; height : 70px ; background-color : #8fbc8f ; } .after { width : 70px ; height : 70px ; background-color : #ffe4c4 ; -webkit-transform: scale( 1.5 , 0.8 ); /*宽度变为原来的1.5倍,高度变为原来的0.8倍*/ -moz-transform: scale( 1.5 , 0.8 ); -ms-transform: scale( 1.5 , 0.8 ); -o-transform: scale( 1.5 , 0.8 ); transform: scale( 1.5 , 0.8 ); } |
结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/9ec62819edb7271e9f4591ad7b79eab1.png)
skew()
元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .before { width : 70px ; height : 70px ; background-color : #8fbc8f ; } .after { width : 70px ; height : 70px ; background-color : #ffe4c4 ; -webkit-transform: skew( 20 deg, 20 deg); /*围绕 X 轴把元素翻转20度,围绕 Y 轴翻转20度*/ -moz-transform: skew( 20 deg, 20 deg); -ms-transform: skew( 20 deg, 20 deg); -o-transform: skew( 20 deg, 20 deg); transform: skew( 20 deg, 20 deg); } |
结果如下:
![](https://i-blog.csdnimg.cn/blog_migrate/1ab8f17916cc34a2a4c80ef1e3b079b1.png)
transition:过渡
元素从一种样式逐渐改变为另一种的效果
有一个div,它的css样式如下:
1 2 3 4 5 6 7 8 9 10 11 12 | div { width : 100px ; height : 100px ; background-color : #87cefa ; -webkit-transition: width 2 s; /*时长为2s的宽度变化效果*/ -moz-transition: width 2 s; -o-transition: width 2 s; transition: width 2 s; } div:hover{ width : 300px ; } |