diff options
Diffstat (limited to 'files/ru/web/css/transform-function/rotate()')
| -rw-r--r-- | files/ru/web/css/transform-function/rotate()/index.html | 137 |
1 files changed, 0 insertions, 137 deletions
diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html deleted file mode 100644 index eddac712aa..0000000000 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ /dev/null @@ -1,137 +0,0 @@ ---- -title: rotate() -slug: Web/CSS/transform-function/rotate() -tags: - - CSS - - CSS трансформация - - CSS функция - - Reference - - Rotate - - transform -translation_of: 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> |