Question

我想将整个身体逆时针旋转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％。我想念什么？

Answer 1

您缺少正确的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>

Answer 2

您将身体旋转了90度，身体中的任何东西也会旋转90度。

您想做什么？为什么不将体内的元素旋转90度呢？

感谢您的帮助。将来我会寻找更明确的问题。无论如何，使用我上面提到的方法让它在代码笔上工作。代码和链接如下。

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 ：Site Banner Upper Right

Answer 3

您要尝试做的事很难。我想您想为此做一些所有页面旋转效果。您想旋转身体使其更易于控制。但是您要制作的东西很棘手。旋转单个元素更安全，因为如果旋转身体，它将不会像图像。我们谈论编码，您需要更改所有页面代码。宽度可以控制，但是高度是一个棘手的问题，因为高度是整个网页。

这对我有用，但可能仅适用于一条短信。当您遇到更复杂的事情时，将很难控制它。这是我的观点。

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

SS of how is look on my screen

将整个html元素逆时针旋转90度

3 个答案: