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
|
---
title: rotate()
slug: Web/CSS/transform-function/rotate
tags:
- CSS
- CSS трансформация
- CSS функция
- Reference
- Rotate
- transform
translation_of: Web/CSS/transform-function/rotate()
original_slug: Web/CSS/transform-function/rotate()
---
<div>{{CSSRef}}</div>
<p>Функция CSS rotate () определяет преобразование, которое перемещает элемент вокруг неподвижной точки (как определено свойством {{Cssxref ("transform-origin")}}, не деформируя его. Количество движения определяется заданным углом; если положительно, движение будет по часовой стрелке, если оно отрицательное, оно будет против часовой стрелки. Вращение на 180 ° называется <em>точечным отражением</em>.</p>
<p><img src="https://mdn.mozillademos.org/files/12113/rotate.png" style="height: 175px; width: 258px;"></p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="syntaxbox">rotate(<em>a</em>)
</pre>
<h2 id="Значения">Значения</h2>
<dl>
<dt><em>a</em></dt>
<dd>Является {{ cssxref("<angle>") }}, представляющим угол поворота. Положительный угол обозначает вращение по часовой стрелке, а отрицательный - против часовой стрелки.</dd>
</dl>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Декартовы координаты на ℝ<sup>2</sup></th>
<th scope="col">Однородные координаты на ℝℙ<sup>2</sup></th>
<th scope="col">Декартовы координаты на ℝ<sup>3</sup></th>
<th scope="col">Однородные координаты на ℝℙ<sup>3</sup></th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1" rowspan="2"><math> <mfenced> <mtable> <mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd></mtr> <mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd></mtr></mtable></mfenced></math></td>
<td><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
<td colspan="1" rowspan="2"><math> <mfenced><mtable><mtr><mtd>cos(a)</mtd><mtd>-sin(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>sin(a)</mtd><mtd>cos(a)</mtd><mtd>0</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd><mtd>0</mtd></mtr><mtr><mtd>0</mtd><mtd>0</mtd><mtd>0</mtd><mtd>1</mtd></mtr></mtable> </mfenced> </math></td>
</tr>
<tr>
<td><code>[cos(a) sin(a) -sin(a) cos(a) 0 0]</code></td>
</tr>
</tbody>
</table>
<h2 id="Примеры">Примеры</h2>
<h3 id="Базовый_пример">Базовый пример</h3>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div>Normal</div>
<div class="rotated">Rotated</div></pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.rotated {
transform: rotate(45deg); /* Equal to rotateZ(45deg) */
background-color: pink;
}</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample("Базовый_пример", "auto", 180)}}</p>
<h3 id="Объединение_вращения_с_другим_преобразованием">Объединение вращения с другим преобразованием</h3>
<p>Если вы хотите применить к элементу несколько преобразований, будьте осторожны с порядком, в котором вы указываете свои преобразования. Например, если вы вращаете перед сдвигом, сдвиг произойдёт относительно новой оси вращения!</p>
<h4 id="HTML_2">HTML</h4>
<pre class="brush: html"><div>Normal</div>
<div class="rotate">Rotated</div>
<div class="rotate-translate">Rotated + Translated</div>
<div class="translate-rotate">Translated + Rotated</div>
</pre>
<h4 id="CSS_2">CSS</h4>
<pre class="brush: css">div {
position: absolute;
left: 40px;
top: 40px;
width: 100px;
height: 100px;
background-color: lightgray;
}
.rotate {
background-color: transparent;
outline: 2px dashed;
transform: rotate(45deg);
}
.rotate-translate {
background-color: pink;
transform: rotate(45deg) translateX(180px);
}
.translate-rotate {
background-color: gold;
transform: translateX(180px) rotate(45deg);
}
</pre>
<h4 id="Result_2">Result</h4>
<p>{{EmbedLiveSample("Объединение_вращения_с_другим_преобразованием", "auto", 320)}}</p>
<h2 id="Спецификации">Спецификации</h2>
{{Specifications}}
<h2 id="Поддержка_браузерами">Поддержка браузерами</h2>
<p>{{Compat}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>{{cssxref("transform")}}</li>
<li>{{cssxref("transform-function")}}</li>
<li>{{cssxref("transform-function/rotate3d", "rotate3d()")}}</li>
</ul>
|
