このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
rotate
Baseline
広く利用可能
この機能は広く実装されており、多くのバージョンの端末やブラウザーで動作します。2022年8月以降、すべてのブラウザーで利用可能です。
rotate は CSS のプロパティで、 transform とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 transform の値で座標変換関数を指定する実際の順序を覚えておく手間を軽減します。
試してみましょう
rotate: none;
rotate: -45deg;
rotate: z 45deg;
rotate: x 45deg;
rotate: y 45deg;
rotate: 3 0.5 2 45deg;
<section class="default-example" id="default-example">
<div class="transition-all" id="example-element">
<div class="face front">1</div>
<div class="face back">2</div>
<div class="face right">3</div>
<div class="face left">4</div>
<div class="face top">5</div>
<div class="face bottom">6</div>
</div>
</section>
#default-example {
background: linear-gradient(skyblue, khaki);
perspective: 550px;
}
#example-element {
width: 100px;
height: 100px;
transform-style: preserve-3d;
}
.face {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: absolute;
backface-visibility: inherit;
font-size: 60px;
color: white;
}
.front {
background: rgb(90 90 90 / 0.7);
transform: translateZ(50px);
}
.back {
background: rgb(0 210 0 / 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgb(210 0 0 / 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgb(0 0 210 / 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgb(210 210 0 / 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgb(210 0 210 / 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
構文
/* キーワード値 */
rotate: none;
/* 角度値 */
rotate: 90deg;
rotate: 0.25turn;
rotate: 1.57rad;
/* x, y, z 軸名と角度 */
rotate: x 90deg;
rotate: y 0.25turn;
rotate: z 1.57rad;
/* ベクトルと角度値 */
rotate: 1 1 1 90deg;
/* グローバル値 */
rotate: inherit;
rotate: initial;
rotate: revert;
rotate: revert-layer;
rotate: unset;
値
- 角度値
-
<angle>で、Z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。rotate()(二次元回転) 関数と等価です。 - x, y, z 軸と角度値
-
該当する要素を回転する軸の名前 (
x,y,z) と、要素を貫いて回転する角度を指定する<angle>です。rotateX()/rotateY()/rotateZ()(三次元回転) 関数と等価です。 - ベクトルと角度値
-
要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値
<number>と、要素を貫いて回転する角度を指定する<angle>です。rotate3d()(三次元回転) 関数と等価です。 none-
回転を適用しないことを表します。
公式定義
| 初期値 | none |
|---|---|
| 適用対象 | 座標変換可能要素 |
| 継承 | なし |
| 計算値 | 指定通り |
| アニメーションの種類 | 座標変換 |
| 重ね合わせコンテキストの生成 | あり |
形式文法
rotate =
none |
<angle> |
[ x | y | z | <number> {3} ] && <angle>
例
ホバー時に要素を回転
次の例は、 rotate プロパティを使用して、ホバー時に要素を様々な軸で回転させる方法を示しています。
1 つ目のボックスはホバー時に Z 軸で 90 度回転し、 2 つ目はホバー時に Y 軸で 180 度回転し、 3 つ目はホバー時に座標を定義したベクトルを中心に 360 度回転します。
HTML
<div class="box" id="box1">rotate Z</div>
<div class="box" id="box2">rotate Y</div>
<div class="box" id="box3">vector & angle</div>
CSS
.box {
display: inline-block;
margin: 1em;
min-width: 6.5em;
line-height: 6.5em;
text-align: center;
transition: 1s ease-in-out;
border: 0.25em dotted;
}
#box1:hover {
rotate: 90deg;
}
#box2:hover {
rotate: y 180deg;
}
#box3:hover {
rotate: 1 2 1 360deg;
}
結果
仕様書
| 仕様書 |
|---|
| CSS Transforms Module Level 2 # propdef-rotate |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。
関連情報
メモ: skew には独立した transform の値はありません