HTML结构:
<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
:
.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;
都可以。