我必须旋转我的身体并做到这一点全高 and 全屏宽度.
嗯，我用的是vh公制并且非常适合width但身高还是不太合适...
我不得不旋转 90 度但是height and width仍然指相同的方向not rotate.
PS：我添加了.red以便更容易地看到在哪里div/body很合适。
我想要的只是旋转的内容适合整个页面/可用窗口的大小
EDIT
我刚刚发现有一种方法可以通过计算来做到这一点sin and 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>
非常感谢！
我认为你的CSS应该使用vw作为高度，vh作为宽度，因为在旋转状态下CSS值仍然参考原始定位。所以：
.main-screen{
width:100vh;
height:100vw;
}
应用后，红色框的尺寸应与视口的尺寸相匹配。
不过，还有第二个问题需要解决。当物体旋转时，默认情况下它绕其中心旋转。因此，对于矩形元素（宽度和高度不同），绕中心旋转会将元素移动到页面上的不同位置。
您需要使用tranform-originCSS 属性可以抵消这种影响。transform-origin更改变换的原点，在本例中是元素围绕其旋转的点。
当旋转固定大小的元素时，您可以很容易地使用此属性来抵消移动。不幸的是，我还没弄清楚如何设置tranform-origin这样它就可以处理可变大小的元素，就像在本例中一样。这可能是你必须使用 JavaScript 的事情（或者也许比我更有创造力的人可以找到仅 CSS 或 SASS 的选项）。
有关转换原点的更多信息，请参阅：https://css-tricks.com/almanac/properties/t/transform-origin/ https://css-tricks.com/almanac/properties/t/transform-origin/
And: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
Edit
尝试一下，让我知道它是否符合您的要求。首先，我们如上所述设置宽度和高度（宽度：100vh；高度：100vw；）。然后，我们不是像上面推测的那样尝试计算可以补偿任何给定宽度的变换原点，而是让盒子绕其左上角轴旋转，然后在盒子上使用绝对定位将位置从 100% 向下移动视口的顶部（即，将框向下推 1 倍长度，使其回到原位）。
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%;
}
<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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
