使用CSS旋转所有html元素（整个页面）90度？ [英] Rotate all html element (whole page) 90 degree with CSS?
本文介绍了使用CSS旋转所有html元素（整个页面）90度？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在页面中显示所有旋转一致和依赖90度的东西，我试图做到这一点，但结果是不准确的， >解决方案
这很有趣。 小提琴
body {margin：0; overflow：hidden;}。wrapper {transform：rotate（90deg）; transform-origin：左下角;位置：绝对的;顶部：-100vw;高度：100vw;宽度：100vh;背景色：＃000;颜色：#FFF; overflow：auto;}
< body> < div class ='wrapper'>测试< br /> < hr /> < div>< hr />< / div> < div>< div>< hr />< / div>< / div> < DIV> ING< / DIV> < / div>< / body>
在一个包装div的内容，设置身体溢出隐藏，并将其滑动宽度....但嘿，它的作品。
如果你是好奇，是的，我确实将屏幕高度设置为屏幕宽度和宽度。使它变得干净。
I want to display every thing in the page rotated consistently and dependently 90 degree, I tried to do it but the result was inaccurate and each element rotated independently.
解决方案
So that was fun. Fiddle
body{
margin:0;
overflow:hidden;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top:-100vw;
height:100vw;
width:100vh;
background-color:#000;
color:#fff;
overflow:auto;
}
<body>
<div class='wrapper'>
test<br />
<hr />
<div><hr /></div>
<div><div><hr /></div></div>
<div>ing</div>
</div>
</body>
Had to wrap the content in a wrapper div, set body overflow to hidden, and slide the thing up by its width.... but hey, it works.
If you're curious, yes, I did set height to screen-width and width to screen-height. Makes it scale itself cleanly.
这篇关于使用CSS旋转所有html元素（整个页面）90度？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
