HTML+CSSで画面を90度回転させたい

要はtransform: rotate(90deg)すればいいんですが、単にこれをやると高さと幅が異なったり、余計な余白ができます。それを回避するために、width: 100vh と height: 100vw を設定して中央寄せしてやります。すると横画面フルスクリーンを疑似的に再現できます。

以下コード

<div id="rotated">
  <h1>90度回転したコンテンツ</h1>
  <p>このコンテンツは90度回転しています。</p>
</div>

html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  /* ↓#rotatedを中央寄せする */
  display: flex;
  justify-content: center;
  align-items: center;
}

#rotated {
  /* ↓ここのwidthとheightの設定がポイント*/
  min-width: 100vh;
  min-height: 100vw;
  transform: rotate(90deg);
  transform-origin: center center;
}