本文介紹了用CSS將所有html元素(整個頁面)旋轉90度?的處理方法,對大家解決問題具有一定的參考價值,需要的朋友們下面隨著小編來一起學習吧!
問題描述
我想顯示頁面中的所有內容都一致且獨立地旋轉 90 度,我嘗試這樣做,但結果不準確,每個元素都獨立旋轉.
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.
推薦答案
這很有趣.小提琴
body{
margin:0;
overflow:hidden;
}
.wrapper{
transform: rotate(90deg);
transform-origin:bottom left;
position:absolute;
top: -100vw;
left: 0;
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>
必須將內容包裝在包裝器 div 中,將 body overflow 設置為隱藏,然后將內容向上滑動寬度......但是,嘿,它可以工作.
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度?的文章就介紹到這了,希望我們推薦的答案對大家有所幫助,也希望大家多多支持html5模板網!
【網站聲明】本站部分內容來源于互聯網,旨在幫助大家更快的解決問題,如果有圖片或者內容侵犯了您的權益,請聯系我們刪除處理,感謝您的支持!