web-dev-qa-db-ja.com

CSSですべてのHTML要素（ページ全体）を90度回転しますか？

ページ内のすべてのものを一貫して90度回転させて表示したいのですが、表示しようとしましたが、結果が不正確で、各要素が個別に回転しました。

htmlcssrotationhtmlelements
12
Hussein

楽しかったです。 フィドル

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でコンテンツをラップし、ボディオーバーフローを非表示に設定し、幅で上にスライドさせなければなりませんでしたが、それはうまくいきました。

興味があれば、はい、高さをscreen-widthに、幅をscreen-heightに設定しました。それ自体をきれいにスケーリングします。

21
abluejelly