我是靠谱客的博主 贪玩香氛,这篇文章主要介绍css2d动画,现在分享给大家,希望可以做个参考。

2d转换的方法

1、2D变形:平移、旋转、缩放、倾斜

1) transform: translate()平移

  • transform: translate(x,y) 沿着x轴和y轴移动

  • transform: translateX(x) 沿着x轴移动

  • transform: translateY(y) 沿着y轴移动

取值:

  • px

  • 百分比(强调相对于元素本身计算)

  • 水平,向右为正,向左为负

  • 垂直,向下为正,向上为负

  • x与y之间用逗号隔开

水平向右为正值,垂直方向向下正值

复制代码
1
2
3
4
/* 沿着水平方向位移 */ 当为一个值的时候,只沿着水平方向位移 transform: translate(50px);   注意:元素位移之后,原来的位置还在

2) transform: rotate(ndeg) 旋转

  • 语法

  • transform:rotate(deg);沿着中心点旋转,默认值

  • transform: rotateX(deg);沿着X轴旋转

  • transform: rotateY(deg);沿着Y轴旋转

单位:deg ​ 当角度值为正数时,元素沿着顺时针方向旋转 ​ 当角度值为负数时,元素沿着逆时针方向旋转

复制代码
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
创建网页3d空间   .wrap {     perspective: 800px;   } ​   .wrap div {     width: 100px;     height: 100px;     background-color: pink;     margin: 30px;     text-align: center;     line-height: 100px;     font-size: 30px; ​     /* 过渡动画 */     transition: 2s; ​ ​   } ​   .box1:hover {     background-color: blue;     transform: rotate(45deg);   } ​   .box2:hover {     background-color: tomato;     transform: rotate(-45deg);   } ​   .box3:hover {     transform: rotateX(60deg);   } ​   .box4:hover {     transform: rotateY(60deg);   } ​   .box5:hover {     transform: rotateY(-60deg);   } ​ ​   .box6:hover {     transform: rotateX(120deg);   } ​   .box7:hover {     transform: rotateX(-120deg);   } ​ ​  <div class="wrap">    <div class="box1">1</div>    <div class="box2">2</div>    <div class="box3">3</div>    <div class="box4">4</div>    <div class="box5">5</div>    <div class="box6">6</div>    <div class="box7">7</div>  </div>

3)transform: scale() 缩放

  • transform: scale(x,y) 沿着x轴和y轴缩放

  • transform: scaleX(x) 沿着x轴缩放

  • transform: scaleY(y) 沿着y轴缩放

取值范围0~1之间表示缩小,1表示正常大小,1以上表示放大,默认值为1 取值为负值表示先翻转后缩放

为一个值的时候,沿着水平方向和垂直方向等比例缩放

元素缩放为0 后,原来的位置还在

x与y之间用逗号隔开

复制代码
1
2
transform: scale(1.5);/* 沿着水平方向和垂直方向都放大1.5倍,等比例缩放 */ transform: scale(-1.5);/* 先翻转,然后 沿着水平方向和垂直方向都放大1.5倍 */

4)transform: skew() 倾斜

  • transform: skew(x,y) 沿着x轴和y轴倾斜

  • transform: skewX(x) 沿着x轴倾斜

  • transform: skewY(y) 沿着y轴倾斜

单位deg(角度) 正值,向左上角和右下角倾斜;负值,向右上角和左下角倾斜

为一个值的时候,只沿着水平方向倾斜

复制代码
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
/* 为一个值的时候,只沿着水平方向位移 */       .box1:hover {           transform: skew(45deg);       } /* skew(30deg,45deg) 围绕 X 轴把元素翻转 30 度,围绕 Y 轴翻转 45 度 */       .box2:hover {           background-color: tomato;           transform: skew(30deg, 45deg);       } ​       .box3:hover {           transform: skewX(-45deg);       } ​       .box4:hover {           transform: skewY(45deg); ​       }       .box5:hover {           transform: skewY(-45deg);       }

5)transform-origin属性 设置元素的基点位置

  • transform-origin: 水平方向 垂直方向;

  • 设置元素的基点位置,设置围绕哪个点进行变化

  • 取值

    百分比(参照自身计算)

px

关键字

水平:left center right ​ 垂直:top center bottom

  • 说明: 两个空格隔开的值,分别表示x,y轴的原点 一个值时,另一个值默认center

  • 可为负数

必须与transform属性配合使用

位移不能用

复制代码
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
52
53
54
55
56
57
58
59
<!DOCTYPE html> <html lang="en"> ​ <head>  <meta charset="UTF-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <meta name="viewport" content="width=device-width, initial-scale=1.0">  <title>Document</title>  <style>    .wrap {      width: 400px;      height: 400px;      background-color: aquamarine;      margin: 50px auto;      /* overflow: hidden; */   } ​    .wrap .box {      width: 200px;      height: 200px;      background-color: pink;      /* margin: 50px auto; */      transition: 2s; ​ ​      transform-origin: 200px 100px;      transform-origin: -200px 100px; ​      transform-origin: 100% 80%;      transform-origin: -100% 80%; ​      transform-origin: 70% 150%; ​      transform-origin: left top; ​ ​ ​   } ​    .wrap:hover .box {      transform: rotate(180deg); ​ ​   }  </style> </head> ​ <body> ​  <div class="wrap">    <div class="box">box</div>  </div> ​ </body> ​ </html>

5)旋转,位移,缩放,倾斜的复合写法

复制代码
1
2
3
4
5
6
7
8
9
10
属性之间用空格隔开 ​    .wrap:hover .box1 {            transform: rotate(135deg);            transform: translate(50px);            transform: scale(1.5);                      transform: translate(100px) rotate(120deg) scale(1.5);       }
  • 总结:

名称语法取值单位其他
位移transform:translate();一个值(沿着水平方向位移),两个值像素pxtransform: translateX(); transform: translateY()
旋转transform: rotate();一个值deg角度
缩放transform: scale();一个值(等比例缩放)、两个值没有单位transform: scaleX(); transform: scaleY()
倾斜transform: skew();一个值(沿着水平方向倾斜)、两个值deg角度transform: skewX(); transform: skewY();

最后

以上就是贪玩香氛最近收集整理的关于css2d动画的全部内容,更多相关css2d动画内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(101)

评论列表共有 0 条评论

立即
投稿
返回
顶部