SASS如何在旋转body时使页面完整的高度和宽度？

Question

我必须旋转我的身体并使其达到全高和全宽。

好吧，我使用了vh度量并且对于width来说效果非常好，但是 height 仍然不太适合......

我必须旋转 90 度，但高度和宽度仍然指与不旋转相同的方向。

PS：我添加.red是为了更容易看到div/body适合的位置。

我想要的只是旋转的内容适合整个页面/可用窗口的大小

编辑

我刚刚发现有一种方法可以通过计算来完成sin，cos我想知道SASS是否可以做到？以更自动化/懒惰的方式？

请参考片段：

div.ccw {
         transform: rotate(-90deg) translateY(0px); 
         -webkit-transform: rotate(-90deg) translateY(0px); 
        -moz-transform: rotate(-90deg) translateY(0px);
        -o-transform: rotate(-90deg) translateY(0px);
        -ms-transform: rotate(-90deg) translateY(0px);
    }
.main-screen{
width:100vh; 
  height:100vh;
}
.red{
background-color:red;
}
#footer{
  
}
#footer {
	    position: fixed;
	    bottom: 0;
	    width: 100%;
	}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div ng-view=""  class="red container-fluid main-screen ng-scope ccw"><div class="error row ng-scope">
	<div class="col-xs-12 text-center">
		<div class="padding-3percent logo col-xs-12 text-center">
			<img class="img-responsive center-block" width="60px" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
		</div>
		<div class="padding-2percent logo col-xs-12 text-center">
			<img width="60px" class="img-responsive center-block" src="https://raw.githubusercontent.com/plu/JPSimulatorHacks/master/Data/test.png">
		</div>
		<div class="text-center col-xs-12">
			<h1>TEST</h1>
		</div>
		<div class="text-center col-xs-12">
			<strong>Test test Test test Test test Test test Test test</strong> 
		</div>
		<div id="footer">
			<div class="text-center col-xs-12">
				<p>
					Test test Test testTest test Test test Test test Test test Test test Test test Test test Test test Test testTest testTest test
				</p>
			</div>
			<div class="text-right col-xs-12">
				<span>counter</span>
			</div>
		</div>
	</div>
</div></div>

非常感谢！

Answer 1

我认为你的CSS应该使用vw作为高度，vh作为宽度，因为在旋转状态下CSS值仍然参考原始定位。所以：

.main-screen{
    width:100vh; 
    height:100vw;
}

应用后，红色框的尺寸应与视口的尺寸相匹配。

不过，还有第二个问题需要解决。当物体旋转时，默认情况下它绕其中心旋转。因此，对于矩形元素（宽度和高度不同），绕中心旋转会将元素移动到页面上的不同位置。

您需要使用tranform-originCSS 属性来抵消这种影响。transform-origin更改变换的原点，在本例中是元素围绕其旋转的点。

当旋转固定大小的元素时，您可以很容易地使用此属性来抵消移动。不幸的是，我还没有弄清楚如何设置，tranform-origin以便它可以与可变大小的元素一起使用，就像在本例中一样。这可能是你必须使用 JavaScript 的事情（或者也许比我更有创造力的人可以找到仅 CSS 或 SASS 的选项）。

有关transform-origin的更多信息，请参阅： https: //css-tricks.com/almanac/properties/t/transform-origin/

并且： https: //developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

编辑

尝试一下，让我知道它是否符合您的要求。首先，我们如上所述设置宽度和高度（宽度：100vh；高度：100vw；）。然后，我们不是像上面推测的那样尝试计算可以补偿任何给定宽度的变换原点，而是使框围绕其左上角轴旋转，然后在框上使用绝对定位将位置从 100% 向下移动视口的顶部（即，将框向下推 1 倍长度，使其回到原位）。

.main-screen{
    width:100vh; 
    height:100vw;
}

div.ccw {
    transform: rotate(-90deg) translateY(0px); 
    -webkit-transform: rotate(-90deg) translateY(0px); 
    -moz-transform: rotate(-90deg) translateY(0px);
    -o-transform: rotate(-90deg) translateY(0px);
    -ms-transform: rotate(-90deg) translateY(0px);
    transform-origin: top left;
}
.main-screen{
    width:100vh; 
    height:100vw;
    position:absolute;
    top:100%;
}
.red{
    background-color:red;
}
#footer{
  
}
#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
}