doka-guide · nasty23-star · Aug 9, 2025 · Aug 9, 2025 · Aug 9, 2025 · Aug 9, 2025
@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Возможные свойства — skew — Дока</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: flex;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #2E9AFF;
+      font-family: "Roboto", sans-serif;
+      color: white;
+      flex-wrap: wrap;
+      gap: 40px;
+    }
+
+    .circle {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background: #3498db;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: white;
+      font-weight: bold;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.3s ease;
+    }
+
+    .circle:hover {
+      transform: scale(1.1);
+    }
+
+    .skew-none {
+      /* Без искажения (для сравнения) */
+      transform: skew(0deg, 0deg);
+      background: #2ecc71;
+    }
+
+    .skew-x {
+      /* Искажение по X */
+      transform: skew(20deg, 0deg);
+      background: #e74c3c;
+    }
+
+    .skew-y {
+      /* Искажение по Y */
+      transform: skew(0deg, 20deg);
+      background: #f39c12;
+    }
+
+    .skew-both {
+      /* Искажение по X и Y */
+      transform: skew(15deg, 15deg);
+      background: #9b59b6;
+    }
+
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+    }
+
+    .label {
+      font-size: 14px;
+      color: #333;
+      text-align: center;
+    }
+  </style>
+</head>
+<body>
+    <div class="container">
+      <div class="circle skew-none">0°, 0°</div>
+      <div class="label">skew(0deg, 0deg)</div>
+    </div>
+
+    <div class="container">
+      <div class="circle skew-x">20°, 0°</div>
+      <div class="label">skew(20deg, 0deg)</div>
+    </div>
+
+    <div class="container">
+      <div class="circle skew-y">0°, 20°</div>
+      <div class="label">skew(0deg, 20deg)</div>
+    </div>
+
+    <div class="container">
+      <div class="circle skew-both">15°, 15°</div>
+      <div class="label">skew(15deg, 15deg)</div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <title>Сочетание трансформаций — skew — Дока</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 {
+      background-color: #2E9AFF;
+      font-family: "Roboto", sans-serif;
+      color: #18191c;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 20px;
+    }
+
+    .container {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      gap: 30px;
+      margin-top: 30px;
+    }
+
+    .box {
+      width: 150px;
+      height: 150px;
+      background: linear-gradient(45deg, #ff9a9e, #fad0c4);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #18191c;
+      font-weight: bold;
+      border-radius: 8px;
+      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+      transition: transform 0.5s ease;
+      margin-bottom: 40px;
+    }
+
+    .demo1:hover {
+      /* skew + rotate */
+      transform: skew(20deg) rotate(15deg);
+    }
+
+    .demo2:hover {
+      /* rotate + skew */
+      transform: rotate(30deg) skew(-15deg);
+    }
+
+    .demo3:hover {
+      /* translate + skew */
+      transform: translate(30px, 20px) skew(10deg, -5deg);
+    }
+
+    .label {
+      text-align: center;
+      margin-top: 10px;
+      font-weight: bold;
+      color: #18191c;
+    }
+  </style>
+</head>
+<body>
+    <h2>Демонстрация skew(), rotate() и translate()</h2>
+    <p>Наведите курсор на каждый блок, чтобы увидеть трансформацию</p>
+    <div class="container">
+        <div>
+          <div class="box demo1">skew() + rotate()</div>
+          <div class="label">transform: skew(20deg) rotate(15deg);</div>
+        </div>
+        <div>
+          <div class="box demo2">rotate() + skew()</div>
+          <div class="label">transform: rotate(30deg) skew(-15deg);</div>
+        </div>
+        <div>
+          <div class="box demo3">translate() + skew()</div>
+          <div class="label">transform: translate(30px, 20px) skew(10deg, -5deg);</div>
+        </div>
+    </div>
+</body>
+</html>
@@ -0,0 +1,82 @@
+---
+title: "`skew`"
+description: "Искажаем и наклоняем элементы с пониманием."
+baseline:
+  - group: transforms2d
+    features:
+      - css.types.transform-function.skew
+      - css.types.transform-function.skewX
+      - css.types.transform-function.skewY
+authors:
+  - anastasiayarosh
+related:
+  - css/will-change
+  - css/rotate
+  - css/transform
+tags:
+  - doka
+---
+
+## Кратко
+
+`skew()` — это функция для CSS-трансформаций(transform), которая наклоняет (искажает) элемент вдоль осей `x` и `y`, создавая эффект перекоса.
+
+## Пример
+
+Наклоняем элемент на 30 градусов по оси `x`:
+
+```css
+div {
+  transform: skewX(30deg);
+}
+```
+
+## Как пишется
+
+Угол наклона должен указываться в [единицах измерения углов](/css/numeric-types/#edinicy-izmereniya-uglov).
+
+`x` — угол наклона по горизонтали (ось X) в градусах (deg).
+
+`y` — (опционально) угол наклона по вертикали (ось Y).
+
+```css
+/* Искажение по X на 20 градусов */
+.skew-x {
+  transform: skewX(20deg);
+}
+
+/* Искажение по Y на 10 градусов */
+.skew-y {
+  transform: skewY(10deg);
+}
+```
+
+Можно наклонять элемент сразу по обеим осям:
+
+```css
+/* Искажение по X на 20° и по Y на 10° */
+.skew-both {
+  transform: skew(20deg, 10deg);
+}
+
+/* Эквивалентная запись */
+.skew-both {
+  transform: skewX(20deg) skewY(10deg);
+}
+```
+
+<iframe title="Демонстрация разных значений skew" src="demos/basic/" height="400"></iframe>
+
+## Как понять
+
+`skew()` наклоняет стороны элемента, сохраняя параллельность линий. В отличие от `scale`, размеры элемента остаются прежними. По умолчанию точка трансформации элемента — его центр. Можно комбинировать `skew()` с другими трансформациями (rotate, translate).
+
+<iframe title="Демонстрация свойства skew вместе с другими свойствами трансформации" src="demos/combination/" height="400"></iframe>
+
+## Важно
+
+💡 Нужно учитывать, что искажение влияет на весь элемент вместе с его содержимым (например, текстом). Можно задать обратное искажение содержимому, если хочется сохранить его внешний вид.
+
+## Полезные инструменты
+
+Для генерации искажения можно использовать такие генераторы skew, как [Webcode](https://webcode.tools/css-generator/skew), [CSS-Generator](https://css-generator.netlify.app/transform-skew) и другие.