HTML <div>を90度回転するにはどうすればよいですか？

245

私が持っている<div>私が90度回転することを：

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

これどうやってするの？

html css

— user1808433
ソース

6

何グーグルはあなたのために行うことができます:)： stackoverflow.com/questions/2449668/...

— ベンツ

例：w3schools.com/cssref/css3_pr_transform.asp

— specialscope

465

これを実現するには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に感謝）

— ジアッド・ボロウィ
ソース

私はこれをCSSファイルで使用していますが変更されていません

— user1808433

9

@ user1808433 90度回転の場合、正方形は同じように見えるため:-)、これがデモです：jsbin.com/opamiq/1

— Dziad Borowy

7

また、それがブロックであることを確認してください

— 曲がりくねった2014年

3

2018年の更新：必要なのみtransform: rotate(90deg);

— rinogo

28

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);
}

— عثمانغني
ソース

37

将来のすべての読者への提案と同様に、常に標準の定義の前に接頭辞付きのルールを配置してください。この場合、すべてのブラウザー接頭辞ルールはルールの前にある必要がありますtransform: rotate(90deg);。その理由は、通常、標準を優先する必要があり、CSSでは最後の定義が常に優先されるためです。

— ジェシー

14

使用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変換を使用できますか？を参照してください。

— ザズ
ソース

1

これは、既存の回答の下のコメントとして、または既存の回答を編集して、他の接頭辞がおそらく不要であることを示す方がよいでしょう。ほぼ同じ答えを3つ持っていても役に立ちません。

— misterManSam 2015

@Zazホバーを外した後でもボックスを回転させ続ける方法は？

— heyayush

@ayushsharma：使用JSまたは参照メイクのCSSホバー状態が「unhovering」の後に残る：一つのハックがある提案#element{transition: 9999999s}（永遠に通常のテイクへの移行バックを作るもの）、および#element:hover{transition: .3s}（またはしかし長いあなたは回転を撮りたいです）。

— Zaz 2017

4

あなたはcss3プロパティライティングモードを使用することができますライティングます：tb-rl

css-tricks

モジラ

— アシュラフ
ソース

0

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

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

半回転の場合はに変更90してください45。

— スビンダス午後
ソース