1. ホーム
  2. ハイパーリンク

[解決済み] [Solved] How to rotate a <div> 90 degrees?

2022-04-02 15:33:43

Question

I have a <div> that I want to rotate 90 degrees:

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

How can I do this?

How to solved?

You need CSS to achieve this, e.g.:

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

Demo:

#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 に感謝)