逆时针旋转整个页面html元素90度
逆时针旋转整个页面html元素90度
提问于 2018-08-17 09:14:33
我想把整个身体逆时针旋转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%。我遗漏了什么？
回答 1
Stack Overflow用户
发布于 2018-08-17 10:05:56
你要做的事情很难做到。我想你应该为此做一些全页面旋转的效果。您希望旋转身体以使其更易于控制。但是你想要做的东西是很棘手的。旋转单个元素更安全，因为如果旋转身体，它就不会像图像一样。我们讨论编码，您需要更改所有页面代码。宽度是可以控制的，但高度是棘手的，因为高度是整个网页。
这就是对我有效的方法，但可能只适用于一条短信。当你有更复杂的事情时，它将很难控制。这就是我的观点。
<!DOCTYPE html>
<html>
<head>
<title>Test page</title>
<style>
body {
transform: rotate(-90deg);
transform-origin: bottom right;
position: absolute;
top: -75vmax;
left: -50vmax;
height: 100vh;
width: 100vw;
background-color: black;
overflow: auto;
}
h1.red {
text-align: center;
color: red;
}
</style>
</head>
<!-- BODY -->
<body>
<h1 class="red">TEST TXT!</h1>
</body>
</html>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51887187
复制相关文章
相似问题