ウェブページ全体を90度、180度、または270度回転させるにはどうすればよいですか？

Question

ウェブページ全体を90度、180度、または280度回転させたいです。

解決方法90度回転する方法は、回答 Rotate all html element (whole page) 90 degree with CSS?で与えられています。 90度から270度に変更すると、ウェブページが「画面外に」回転するか、画面の中央に表示されません。私は私のモニターを回転させるようにページを回転させたいと思います。私のページは左上から始まります。

180度と270度で正しく動作するようにこのコードを編集するにはどうすればよいですか？

Answer 1

transform-originは、これを担当するCSSプロパティです。要素が回転している点を決定します。 transform-originを変更して要素を回転させると、使用する値によって要素の位置が変わる可能性があります。 transform-originの値を必要な結果に変更することができます。ここで

は、2つの異なる transform-origin S（それらの上にホバー）の例です：

.wrapper { 
 
    margin-left: 50px; 
 
    color: white; 
 
    transform-origin: bottom left; 
 
    height: 100px; 
 
    width: 100px; 
 
    background-color: #000; 
 
    color: #fff; 
 
    overflow: auto; 
 
    padding: 10px; 
 
} 
 

 
.wrapper:hover { 
 
    transition-duration: 0.3s; 
 
    transform: rotate(90deg); 
 
} 
 

 
.spacerM { 
 
    display: block; 
 
    width: 100%; 
 
    clear: both; 
 
    height: 30px; 
 
} 
 

 
.correct { 
 
    transform-origin: center; 
 
    background: red; 
 
}

<div class="wrapper">Transform-Origin Bottom Left</div> 
 
<div class="spacerM"></div> 
 
<div class="wrapper correct">Transform-Origin Center</div>

Answer 2

は、上記のthe answerを拡張し、私は90、180、および270度のページを取得することができました次のスタイルで回転します。 transform-originとtopは90と270のために必要とされるが、あなたは変換起源を変更いけない場合、あなたが望むように180

// 90 degrees 
.wrapper { 
    transform: rotate(90deg); 
    transform-origin: bottom left; 
    top: -100vw; 
    height: 100vw; 
    width: 100vh; 
    position: absolute; 
} 

// 180 degrees 
.wrapper { 
    transform: rotate(180deg); 
    height: 100vh; 
    width: 100vw; 
    position: absolute; 
} 

// 270 degrees 
.wrapper { 
    transform: rotate(270deg); 
    transform-origin: top left; 
    top: 100vh; 
    height: 100vw; 
    width: 100vh; 
    position: absolute; 
}