CSS-基础(六)

技术

CSS学习笔记（六）

变形与透视

translate 控制元素三纬运动

  • X axis

transform:translateX(200px)

  • Y axis

transform:translateY(200px)

  • XY shorthand

transfrom:translate(200px,200px)

  • Z axis has no relative unit 因此只能使用绝对单位

transfrom:translateZ(200px)

  • 3D shorthand

transfrom:translate3d(20%,0,100px)

scale 控制缩放

1
2
3
4
5
6
7
8
9
10
/*example*/
main:hover div-nth-child(1){
  transform:scaleX(2); /*x轴尺寸放大原来的1倍*/
}
main:hover div-nth-child(2){
  transform:scaleY(.5);/*y轴尺寸缩小原来的1倍*/
}
main:hover div-nth-child(2){
  transform:scale(2, .5); /*Shorthand*/
}

transform 基点

transform-orign:left top //从左上角开始缩放

rotate 旋转

transform:rotateX(45deg) 向上翻转45度

transform:rotateY(45deg)向右翻转45度

transform:rotateZ(45deg) 平面旋转45度 或transform:rotate(45deg)

skew 倾斜

transform:skewX(45deg)

transform:skewY(45deg)

transform:skew(45deg,45deg)

钟表绘制

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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <main>
    <div class="clock">
      <div class="line">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <div class="hour"></div>
    <div class="minute">
    </div>
    <div class="second"></div>
    </div>
  </main>
</body>
</html>
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
*{
  padding:0;
  maring:0;
}
body{
  background:#2c3e50;
  width:100vw;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}
main{
  width:200px;
  height:200px;
  border-radius:50%;
  position:relative;
}
.clock{
  width:200px;
  height:200px;
  border-radius:50%;
  background:#ddd;
  position:relative;
  z-index:-2;
}
.clock::after{
  content:'';
  width:90%;
  height:90%;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  background:#2c3e50;
  position:absolute;
  z-index:-1;
}
.line{
  content:'';
  width:80%;
  height:80%;
  left:50%;
  top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%);
  position:absolute;
}
.line>div{
  width:4px;
  background:#fff;
  height:100%;
  position:absolute;
  left:50%;
}
.line>div:nth-of-type(1){
  transform:translateX(-50%) rotate(0deg);
}
.line>div:nth-of-type(2){
  transform:translateX(-50%) rotate(30deg);
}
.line>div:nth-of-type(3){
  transform:translateX(-50%) rotate(60deg);
}
.line>div:nth-of-type(4){
  transform:translateX(-50%) rotate(90deg);
}
.line>div:nth-of-type(5){
  transform:translateX(-50%) rotate(120deg);
}
.line>div:nth-of-type(6){
  transform:translateX(-50%) rotate(150deg);
}

.line::before{
  content:'';
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:90%;
  height:90%;
  position:absolute;
  border-radius:50%;
  background:#2c3e50;
  z-index:2;
}
.line::after{
  content:'';
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:10px;
  height:10px;
  position:absolute;
  border-radius:50%;
  background:#fff;
  z-index:2;
} 
.hour{
  width:4px;
  background:#fff;
  height:15%;
  bottom:50%;
  transform:translateX(-50%);
  position:absolute;
  left:50%;
}
.minute{
  width:3px;
  background:#fff;
  height:25%;
  bottom:50%;
  transform-origin:bottom;
  transform:translateX(-50%) rotate(60deg);
  position:absolute;
  left:50%;
}
.second{
  width:2px;
  background:#fff;
  height:35%;
  bottom:50%;
  transform-origin:bottom;
  transform:translateX(-50%) rotate(45deg);
  position:absolute;
  left:50%;
  transition:5s;
}
main:hover .second {
  transform:translateX(-50%) rotate(360deg);
}

perspective 透视

  • 观察单个元素

transform:perspective(900px) rotateY(20deg);

  • 同时观察容器中所有元素

perspective:900px;

  • 观察容器本身

transfrom:perpective(900px) rotateY(45deg);

Eg: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*同时观察容器中所有元素*/
.container{
	perspective:900px;
}
/*观察单个元素*/
.container div{
  transform:perspective(900px) rotateY(20deg);
}
/*观察容器本身*/
.container{
  transform-style:preserve-3d;/*只要有三维空间参与，需要使用此方法*/
  transform:perspective(900px) rotateY(45deg);
}
.container div{
  transform:perspective(900px) translateZ(50px);
}

backface-visibility

翻转后，设置背面不可见

backface-visibilty:hidden;

  • 版权声明： 本博客所有文章除特别声明外，均采用 Apache License 2.0 许可协议。转载请注明出处！
  • © 2020 Ruoyu Wang
  • PV: UV:

请我喝杯咖啡吧~

支付宝
微信