logo标签列表

旋转整个页面的HTML元素90度逆时针

htmlcss
3
我想将整个身体逆时针旋转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

你想要看什么？那会非常有帮助。 - ThS
Hellooo 应该出现在屏幕的最右侧。 - Waterfr Villa
3个回答
1
您缺少“right 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>

0
你将身体旋转了90度，身体内的任何东西也会被旋转90度。
你想做什么？为什么不直接将身体内的元素旋转90度呢？

感谢帮助。将来我会寻找更清晰的问题。 无论如何，我已经在CodePen上使用了我之前提到的方法使其正常工作。以下是代码和链接。

HTML：

<body id="body">
  <div class='wrapper'>

    <div id="caption" class="msg">
      <p>Site Banner</p> 
    </div>
  </div>
  <main></main>
</body>

CSS：

body, html {
        padding: 0;
        margin: 0;
        height: 100%;
        background-color: #000;
        font-family:Lucida Console;
    }

    .msg {
       float: right; 
    }

.msg > p {
  margin: 0px;
  padding: 0px;
  overflow: visible;
  transform: rotate(-90deg) translate(-120px, 120px);
  color: white;
  font-size: 60px;
  text-shadow: 4px 4px 15px gray;
  margin: 10px 10px 10px 10px;
  direction: ltr; /* lang */
  text-align: right;
}

    .wrapper{
    display: block;
    background-color: #000;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    }

main{
  display: block;
  height: 600px;
  width: 100%;
  background-color: #222222;
}

CodePen: 网站横幅右上角

1
这是一个注释，不是对问题的回答。请不要在回答部分添加注释。请删除这个注释。 - Rob
0

你试图做的事情很困难。我觉得你想要实现整个页面的旋转效果，这样可以更容易控制页面的旋转。但是你试图实现的方式比较棘手。最好是旋转单独的元素，因为如果旋转整个页面，它不会像一张图片那样。我们在讨论编码问题，你需要改变整个页面的代码。控制宽度还好，但高度是个棘手的问题，因为高度涉及整个网页。

对我来说，这是有效的方法，但可能只适用于一个文本消息。当你处理更复杂的内容时，控制起来会更困难。这是我的观点。

<!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>

我屏幕上的样子的截图

旋转单个元素不是一个好主意，因为屏幕上会有更多的元素。有时候我想将所有东西都旋转90度以适应纵向视图，有时候我不想旋转。所以在得到这个问题的答案之后，我会编写一个JavaScript封装函数来进行旋转操作。 - Waterfr Villa
请在您的语言中更加正式，不要将 Stack Overflow（SO）视为 Reddit 或其他业余论坛。请完整拼写单词，不要用 "u" 代替 "you"，也不要用 "wanna" 代替 "want to"。 - Rob
抱歉，英语不是我的母语，感谢您的纠正。 - ASI
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接