gpt4 book ai didi

html - 逆时针旋转整个页面html元素90度

转载 作者:行者123 更新时间:2023-11-28 00:44:00 25 4
gpt4 key购买 nike

我想逆时针旋转整个 body 90 度。这是我所做的:

  body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}

.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}

.wrapper{
transform: rotate(-90deg);
transform-origin:bottom right;

position:absolute;
top:-100vw;


height:100vw;
width:100vh;

background-color:#000;
color:#fff;

overflow:auto;
}
<body id="body">
<div class='wrapper'>


<div id="caption" class="msg"> Heloooooo</div>


</div>

</body>

然而,结果如下图所示,内容向左偏移了将近 50%。我错过了什么?

enter image description here

最佳答案

您缺少正确的 0:

	   .rotate90counterclockwise{
transform: rotate(-90deg);
transform-origin:bottom right;
position:absolute;
top:-100vw;
right:0;
height:100vw;
width:100vh;
}



body, html {
position: relative;
padding: 0;
margin: 0;
height: 100%;
min-height: 100%;
max-height: 100%;
background: black;
}

.msg {
color: white;
font-size: 350%;
text-shadow: 4px 4px 15px gray;
margin: 10px 10px 10px 10px;
z-index: 1;
bottom: 0;
direction: ltr; /* lang */
position: absolute;
text-align: center;
width: 100%
}
<body id="body">
<div class='rotate90counterclockwise'>
<div id="caption" class="msg"> Heloooooo</div>
</div>

</body>

关于html - 逆时针旋转整个页面html元素90度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51887187/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com