doka-guide · solarrust · Nov 15, 2024 · Jul 18, 2024 · Jul 22, 2024 · Jul 24, 2024
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Анимация свойства rotate — rotate — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      height: 100dvh;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #18191C;
+      ;
+    }
+
+    .container {
+      display: flex;
+    }
+
+    .box {
+      animation: loader 3s linear alternate infinite;
+      background-color: #2E9AFF;
+      width: 50px;
+      height: 50px;
+      color: #00136c;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+
+    @keyframes loader {
+      0% {
+        rotate: 0deg;
+      }
+
+      50% {
+        background-color: #F498AD;
+        border-radius: 25%;
+      }
+
+      100% {
+        border-radius: 50%;
+        rotate: 180deg;
+        background-color: #2E9AFF;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="box">
+    </div>
+  </div>
+</body>
+
+</html>
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Возможные свойства — rotate — Дока</title>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html,
+    body {
+      height: 100%;
+    }
+
+    body {
+      display: grid;
+      place-items: center;
+      gap: 1rem;
+      min-height: 100dvh;
+      padding: 50px;
+      background-color: #18191C;
+      font-family: "Roboto", sans-serif;
+      color: white;
+    }
+
+    .wrapper_box {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      gap: 20px;
+      align-content: center;
+    }
+
+    .box {
+      width: 150px;
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      color: black;
+      transition: 2s ease-in-out;
+      background-color: #2E9AFF;
+      user-select: none;
+    }
+
+    #box1:hover {
+      rotate: -90deg;
+    }
+
+    #box2:hover {
+      rotate: y 180deg;
+    }
+
+    #box3:hover {
+      rotate: 1 0 1 360deg;
+    }
+
+    h1 {
+      margin-block-start: 25px;
+      font-size: 26px;
+      font-weight: 500;
+      text-align: center;
+    }
+
+  </style>
+</head>
+<body>
+  <div class="container">
+    <div class="wrapper_box">
+      <div class="box" id="box1"><code>rotate: -90deg;</code></div>
+      <div class="box" id="box2"><code>rotate: y 180deg;</code></div>
+      <div class="box" id="box3"><code>rotate: 1 0 1 360deg;</code></div>
+    </div>
+    <h1>Наведи курсор 🖱</h1>
+  </div>
+</body>
+</html>
@@ -0,0 +1,73 @@
+---
+title: "`rotate`"
+description: "Как повернуть элементы на странице просто и быстро."
+authors:
+  - anastasiayarosh
+contributors:
+  - solarrust
+related:
+  - css/will-change
+  - css/transition
+  - css/transform
+tags:
+  - doka
+---
+
+## Кратко
+
+Свойство `rotate` используют, когда нужно повернуть элемент. Раньше для поворота нужно было использовать свойство [`transform`](/css/transform/) со значением `rotate`, что не всегда было удобно. Теперь для этого есть отдельное свойство.
+
+## Пример
+
+Поворачиваем элемент на 30 градусов вправо:
+
+```css
+div {
+  rotate: 30deg;
+}
+```
+
+## Как пишется
+
+Угол поворота должен указываться в [единицах измерения углов](/css/numeric-types/#edinicy-izmereniya-uglov).
+
+Если указано одно значение, то элемент будет вращаться вдоль оси _z_:
+
+```css
+.element {
+  rotate: 90deg;
+}
+```
+
+К значению величины поворота можно добавить уточнение, по какой из трёх осей (_x_, _y_, _z_) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:
+
+```css
+.element {
+  rotate: x 90deg;
+}
+```
+
+В таком формате можно указать угол наклона только по одной из осей. Не получится задать второе значение в этом же свойстве или ниже.
+
+Можно указать собственный вектор и угол вращения в формате: 3 числа + угол. Аналогично функции `rotate3d()`.
+
+```css
+.element {
+  rotate: 0 0 1 45deg;
+}
+```
+
+Каждое из трёх чисел отвечает за соответсвующую ось (_x_, _y_, _z_). 0 значит, что вращения по этой оси не будет. Всё, что больше нуля, устанавливает точку на этой оси.
+В итоге элемент будет повярнут вокруг точки на пересечении всех трёх осей.
+
+> Помните, что все оси по умолчанию выходят из верхнего левого угла элемента. Это можно изменить при помощи [`transform-origin`](/css/transform-origin/).
+
+<iframe title="Демонстрация разных значений свойства rotate" src="demos/basic/" height="400"></iframe>
+
+## Как понять
+
+Отдельное свойство `rotate` пришло на замену функции [`rotate()`](https://doka.guide/css/transform-function/#funkcii-povorota). Не смотря на то, что свойство `transform` с его функциями очень мощное, часто бывало, что нужно переписывать весь трансформ со всеми его значениями, чтобы изменить только один параметр. Теперь для несложных поворотов можно использовать `rotate`. Также не нужно запоминать порядок позиционирования функции, в отличие от `transform`.
+
+`rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью [`:hover`](/css/hover/) и [`@keyframes`](/css/keyframes/).
+
+<iframe title="Анимация при помощи свойства rotate" src="demos/animation/" height="300"></iframe>