doka-guide · solarrust · Nov 15, 2024 · Jul 18, 2024 · Jul 22, 2024 · Jul 24, 2024
@@ -0,0 +1,69 @@
+<!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: 100vh;
+      width: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      background: #18191C;;
+    }
+
+    .container {
+      display: flex;
+    }
+
+    .box {
+      animation: loader 3s 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: #F498AD;
+        border-radius: 25%;
+      }
+
+      100% {
+        border-radius: 50%;
+        rotate: 180deg;
+        background: #2E9AFF;
+      }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="container">
+    <div class="box">
+    </div>
+  </div>
+</body>
+
+</html>
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="ru">
+
+<head>
+  <title>Демонстрация разных значений свойства rotate — 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&display=swap">
+  <style>
+    *,
+    *::before,
+    *::after {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      background: #18191C;
+      font-family: "Roboto", sans-serif;
+    }
+
+    .wrapper_box {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      gap: 20px;
+      align-content: center;
+    }
+
+    .box {
+      height: 120px;
+      width: 120px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: 1s ease-in-out;
+      background-color: #2E9AFF;
+    }
+
+    #box1:hover {
+      rotate: -90deg;
+    }
+
+    #box2:hover {
+      rotate: y 180deg;
+    }
+
+    #box3:hover {
+      rotate: 1 2 1 360deg;
+    }
+
+    #box4:hover {
+      rotate: 2turn;
+    }
+
+    #box5:hover {
+      rotate: x 90deg;
+    }
+
+    #box6:hover {
+      rotate: 1.57rad;
+    }
+
+    #box7:hover {
+      rotate: 200grad;
+    }
+  </style>
+</head>
+
+<body>
+  <div class="wrapper_box">
+    <div class="box" id="box1">rotate Z</div>
+    <div class="box" id="box2">rotate Y</div>
+    <div class="box" id="box3">vector & angle</div>
+    <div class="box" id="box4">turn</div>
+    <div class="box" id="box5">flat</div>
+    <div class="box" id="box6">rad</div>
+    <div class="box" id="box7">grad</div>
+  </div>
+</body>
+
+</html>
@@ -0,0 +1,96 @@
+---
+title: "`rotate`"
+description: "Как повернуть элементы на странице просто и быстро."
+authors:
+  - anastasiayarosh
+related:
+  - css/will-change
+  - css/transition
+  - css/transform
+tags:
+  - doka
+---
+
+## Кратко
+
+Свойство `rotate` используют, когда нужно повернуть элемент.
+
+## Пример
+
+Поворачиваем элемент на 30 градусов вправо:
+
+```css
+div {
+  rotate: 30deg;
+}
+```
+
+## Как пишется
+
+Свойство может принимать значения для поворота по оси Z. Например:
+
+```css
+rotate: 90deg;
+rotate: 0.25turn;
+rotate: 1.57rad;
+rotate: -50grad;
+```
+
+К значению величины поворота можно добавить уточнение, по какой из трёх осей (X, Y, Z) применится значение. Эквивалентно `rotateX()`, `rotateY()`, `rotateZ()`:
+
+```css
+rotate: x 90deg;
+rotate: y 0.25turn;
+rotate: z 1.57rad;
+rotate: x 10grad;
+```
+
+## Как понять
+
+Свойство `rotate` в CSS поворачивает элемент вокруг одной или нескольких осей. Это можно представить как вращение элемента вокруг этих точек в направлениях по часовой стрелке и против часовой стрелки, измеряемых в градусах, градиентах, радианах и значениях поворота.
+
+## О единицах, применяемых к свойству
+
+deg: один градус равен 1/360 полного круга.
+
+grad: один градиан равен 1/400 полного круга.
+
+rad: радиан — это длина диаметра круга вокруг дуги фигуры. Один радиан равен 180 градусам или 1/2 полного круга. Один полный круг равен 2π радиан, что соответствует 6,2832 радиан или 360 градусам.
+
+turn: один поворот — это один полный круг. Половина круга равна 0,5 оборота или 180 градусов.
+
+Свойство поворота принимает любую из этих единиц, поскольку они представляют собой разные способы выражения одной и той же идеи: угла вокруг круга. И они одинаково поддерживаются всеми основными браузерами.
+
+<iframe title="Демонстрация разных значений свойства rotate" src="demos/basic/" height="400"></iframe>
+
+## Поддержка
+
+Свойство `rotate` поддерживается большинством современных браузеров, убедиться можно на ресурсе [Can I Use](https://caniuse.com/mdn-css_properties_rotate).
+
+## Свойство rotate, переходы и анимация
+
+`Rotate` поддерживает переходы и анимацию CSS, которые можно делать с помощью `hover` и `@keyframes`.
+
+<iframe title="Анимация при помощи свойства rotate" src="demos/animation/" height="300"></iframe>
+
+Более сложные анимации получатся при совмещении свойств `rotate` с функциями `transform`.
+
+## Отличие `rotate` и `transform: rotate`
+
+Можно сделать поворот элемента на 45 градусов с помощью `rotate` таким способом:
+
+```css
+.element {
+  rotate: 45deg;
+}
+```
+
+Хотя есть и способ поворота элементов с помощью функции `rotate()` в свойстве `transform`, например:
+
+```css
+.element {
+  transform: rotate(45deg);
+}
+```
+
+Но `rotate` делает это вообще независимо от свойства `transform`, а также дает дополнительное преимущество в виде возможности вращения вдоль оси Z, что в настоящее время невозможно с помощью `transform: rotate()`.