blob: e6bc6dffae583a3aab0f622c48202b150becf463 (
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
|
---
title: rotateZ()
slug: Web/CSS/transform-function/rotateZ()
tags:
- CSS
- CSS 関数
- CSS 座標変換
- 関数
- リファレンス
browser-compat: css.types.transform-function.rotateZ
translation_of: Web/CSS/transform-function/rotateZ()
---
{{CSSRef}}
**`rotateZ()`** は [CSS](/ja/docs/Web/CSS) の[関数](/ja/docs/Web/CSS/CSS_Functions)で、要素の形を変化させずに Z 軸の周りを回転させる変形を定義します。結果は {{cssxref("<transform-function>")}} データ型になります。
{{EmbedInteractiveExample("pages/css/function-rotateZ.html")}}
回転軸は、 {{ cssxref("transform-origin") }} CSS プロパティで定義される原点を通ります。
> **Note:** `rotate(a)` または `rotate3d(0, 0, 1, a)` と等価です。
> **Note:** 二次元平面での回転とは異なり、三次元での回転はふつう交換可能ではありません。言い換えれば、回転の順番が結果に影響を与えます。
## 構文
`rotateZ()` で生成される回転の量は、 {{cssxref("<angle>")}} で指定します。正の数であれば、移動は時計回りです。負の数であれば、反時計回りになります。
```css
rotateZ(a)
```
### 値
- `a`
- : {{ cssxref("<angle>") }} で、回転する角度を表します。正の数の角度は時計回りの回転を、負の数の角度は反時計回りの回転を表します。
<table class="standard-table">
<thead>
<tr>
<th scope="col">ℝ^2 のデカルト座標</th>
<th scope="col">ℝℙ^2 の同次座標</th>
<th scope="col">ℝ^3 のデカルト座標</th>
<th scope="col">ℝℙ^3 の同次座標</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="2">
この変形は三次元空間に適用され、平面で表すことはできません。
</td>
<td>
<math
><mfenced
><mtable
><mtr
><mtd
><mo>cos</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd
><mo>-</mo>
<mo>sin</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd
><mo>sin</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd
><mo>cos</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>1</mn></mtd></mtr
></mtable
></mfenced
></math
>
</td>
<td>
<math
><mfenced
><mtable
><mtr
><mtd
><mo>cos</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd
><mo>-</mo>
<mo>sin</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd
><mo>sin</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd
><mo>cos</mo>
<mo>(</mo>
<mi>a</mi>
<mo>)</mo> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>1</mn> </mtd><mtd><mn>0</mn> </mtd></mtr
><mtr
><mtd><mn>0</mn> </mtd><mtd><mn>0</mn> </mtd
><mtd><mn>0</mn> </mtd><mtd><mn>1</mn></mtd></mtr
></mtable
></mfenced
></math
>
</td>
</tr>
</tbody>
</table>
<h2 id="Examples">例</h2>
### HTML
```html
<div>Normal</div>
<div class="rotated">Rotated</div>
```
### CSS
```css
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotateZ(45deg);
background-color: pink;
}
```
### 結果
{{EmbedLiveSample("Examples", "auto", 180)}}
## 仕様書
{{Specifications}}
## ブラウザーの互換性
{{Compat}}
## 関連情報
- {{cssxref("transform")}}
- {{cssxref("<transform-function>")}}
|
