blob: 4686d963bc4040ba052f104eb472adfb8fd0bef5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
---
title: rotate
slug: Web/CSS/rotate
tags:
- CSS
- CSS プロパティ
- Reference
- 回転
- 座標変換
- angle
- recipe:css-property
- rotation
browser-compat: css.properties.rotate
translation_of: Web/CSS/rotate
---
{{CSSRef}}
**`rotate`** は [CSS](/ja/docs/Web/CSS) のプロパティで、 {{CSSxRef("transform")}} とは個別に独立して回転変換を指定することができます。これは一般のユーザーインターフェイスの利用においてはより適しており、 `transform` の値で変形関数を指定する実際の順序を覚えておく手間を軽減します。
## 構文
```css
/* キーワード値 */
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: unset;
```
### 値
- 角度値
- : {{CSSxRef("<angle>")}} で、 z 軸の周囲を該当する要素を貫いて回転させる角度を指定します。`rotate()` (二次元回転) 関数と等価です。
- x, y, z 軸と角度値
- : 該当する要素を回転する軸の名前 (`"x"`, "`y`", "`z"`) と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotateX()`/`rotateY()`/`rotateZ()` (三次元回転) 関数と等価です。
- ベクトルと角度値
- : 要素を回転させたい直線を表す原点を中心としたベクトルを表す 3 つの数値 {{CSSxRef("<number>")}} と、要素を貫いて回転する角度を指定する {{CSSxRef("<angle>")}} です。 `rotate3d()` (三次元回転) 関数と等価です。
- `none`
- : 回転を適用しないことを表します。
## 公式定義
{{cssinfo}}
## 形式文法
{{csssyntax}}
## 例
<h3 id="Rotate_an_element_on_hover">ホバー時に要素を回転</h3>
#### HTML
```html
<div>
<p class="rotate">Rotation</p>
</div>
```
#### CSS
```css hidden
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
div {
width: 150px;
margin: 0 auto;
}
p {
padding: 10px 5px;
border: 3px solid black;
border-radius: 20px;
width: 150px;
font-size: 1.2rem;
text-align: center;
}
```
```css
.rotate {
transition: rotate 1s;
}
div:hover .rotate {
rotate: 1 -0.5 1 180deg;
}
```
#### 結果
{{EmbedLiveSample("Rotate_an_element_on_hover")}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref('translate')}}
- {{cssxref('scale')}}
- {{cssxref('transform')}}
メモ: `skew` には独立した `transform` の値はありません
|
