html - 回転させる方法90度？

Question

<div>90度回転させたいものがあります。

<div id="container_2"></div>

これどうやってするの？

Answer 1

これを実現するにはCSSが必要です。例：

#container_2 {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

デモ：

#container_2 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

<div id="container_2"></div>

（デモには45度の回転があるので、効果を確認できます）

注：-o-プレフィックスと-moz-プレフィックスは関連しなくなり、おそらく必須ではなくなります。IE9にはが必要-ms-であり、SafariとAndroidブラウザには-webkit-

---

2018年の更新：ベンダープレフィックスは不要になりました。ただtransform十分です。（@rinogoに感謝）

Answer 2

CSSで以下を使用します

div {
    -webkit-transform: rotate(90deg); /* Safari and Chrome */
    -moz-transform: rotate(90deg);   /* Firefox */
    -ms-transform: rotate(90deg);   /* IE 9 */
    -o-transform: rotate(90deg);   /* Opera */
    transform: rotate(90deg);
} 

Answer 3

使用transform: rotate(90deg)：

#container_2 {
    border: 1px solid;
    padding: .5em;
    width: 5em;
    height: 5em;
    transition: .3s all;  /* rotate gradually instead of instantly */
}

#container_2:hover {
    -webkit-transform: rotate(90deg);  /* to support Safari and Android browser */
    -ms-transform: rotate(90deg);      /* to support IE 9 */
    transform: rotate(90deg);
}

<div id="container_2">This box should be rotated 90&deg; on hover.</div>

[コードスニペットの実行]をクリックし、ボックスにカーソルを合わせると、変換の効果が表示されます。

現実的には、他のプレフィックス付きエントリは必要ありません。CSS3トランスフォームを使用できますか？を参照してください。

Answer 4

css3プロパティの書き込みモード 書き込みモードを使用できます：tb-rl

css-トリック

mozilla

Answer 5

cssの「rotate（）」メソッドを使用します。

div {
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: 1px solid black;
}

div#rotate{
  transform: rotate(90deg);
}

<div>
normal div
</div>
<br>

<div id="rotate">
This div is rotated 90 degrees
</div>

Answer 6

CSSの特定のタグに以下を追加できます。

-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);

半回転の場合はに変更90し45ます。