HTML结构：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| <div class="container">
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">账号</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入账号">
</div>
<div class="mb-3">
<label for="exampleFormControlInput1" class="form-label">密码</label>
<input type="email" class="form-control" id="exampleFormControlInput1" placeholder="请输入密码">
</div>
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">备注</label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="请输入备注"></textarea>
</div>
</div>
|
CSS：
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
| .container {
position: absolute;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
}
/* 竖屏 */
@media screen and (orientation: portrait) {
.container {
width: 100vh;
height: 100vw;
top: calc((100vh - 100vw) / 2);
left: calc((100vw - 100vh) / 2);
transform: rotate(90deg);
/* transform-origin: 50% 50%; */
/* transform-origin: center center; */
/* transform-origin: center; */
}
}
/* 横屏 */
@media screen and (orientation: landscape) {
.container {
width: 100vw;
height: 100vh;
top: 0;
left: 0;
transform: none;
/* transform-origin: 50% 50%; */
/* transform-origin: center center; */
/* transform-origin: center; */
}
}
|
transform-origin：更改一个元素变形的原点
rotate()函数的转换原点是旋转中心
默认的转换原点是 center，所以如果是以center为旋转中心，可以不写transform-origin属性，或者写transform-origin: 50% 50%;、transform-origin: center center;、transform-origin: center;都可以。
