diff options
Diffstat (limited to 'files/ru/web/css/transform-function/rotate/index.html')
| -rw-r--r-- | files/ru/web/css/transform-function/rotate/index.html | 138 |
1 files changed, 138 insertions, 0 deletions
diff --git a/files/ru/web/css/transform-function/rotate/index.html b/files/ru/web/css/transform-function/rotate/index.html new file mode 100644 index 0000000000..57f781c4ff --- /dev/null +++ b/files/ru/web/css/transform-function/rotate/index.html @@ -0,0 +1,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> |