01.CSS动画-->transform
transform:
translate(参数1，参数2)；让元素在X轴与Y轴方向发生偏移-->参数1：X；参数2：Y
rotate(参数1)；让元素进行旋转；单位(deg)
scale(参数1，参数2)；让元素在X轴与Y轴放大或缩小多少倍-->参数1：X；参数2：Y
skew(参数1，参数2)；skew(30deg,20deg)-->围绕 X 轴把元素翻转 30 度，围绕 Y 轴翻转 20 度
transition:过渡效果
transition: all 1s linear 3s;
*过渡效果
|
1
2
3
4
|
<em id="__mceDel"> 参数1：用来指定对那些属性使用过渡效果 参数2：过渡效果的持续时间 参数3：过渡效果的显示速度变化 参数4：用来指定过渡效果的延迟时间*/</em> |
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <style> #div1{ width: 100px; height: 100px; /*过渡效果 参数1：用来指定对那些属性使用过渡效果 参数2：过渡效果的持续时间 参数3：过渡效果的显示速度变化 参数4：用来指定过渡效果的延迟时间*/ transition: all 1s linear 3s; border: 1px solid red; margin: auto; background-image: url("../../../img/f3_Android1.png"); background-size: 100% 100%; } #div1:hover{ /*translate：让元素在X和Y轴发生偏移 参数1：X轴方向偏移 参数2：Y轴方向偏移 translatex:让元素在X轴方向发生偏移 translatey:让元素在Y轴方向发生偏移*/ /*transform: translate(50px,0);*/ /*scale:让元素在X轴和Y轴都发生缩放 参数1：X轴方向的方法倍数 参数2：Y轴方向的放大倍数 scaleX：让元素在X轴方向发生缩放 scaleY：让元素在Y轴方向发生缩放*/ transform: scaleX(1.5); /*rotate：让你的元素按照指定的中心点进行旋转 rotateX:让元素沿着X轴旋转 rotateY：让元素沿着Y轴旋转 */ /*transform: rotateY(180deg);*/ /*transform: skewY(-90deg);*/ /*transform-origin:用来设置旋转的中心点*/ /*transform-origin: left;*/ } </style> <title>变形效果</title></head><body><div id="div1"></div></body></html> |
