Добавляет доку про backface-visibility (#5525)

* Добавляет доку про `backface-visibility` * Редактирует доку, меняет разделы местами * Добавил демо * Интегрировал iframe с демкой * Красит демку * Вычитывает --------- Co-authored-by: Alena Batitskaia <[email protected]> Co-authored-by: Svetlana Korobtseva <[email protected]>
doka-guide · Oct 24, 2024 · dd6ef5d · dd6ef5d
1 parent 3cfc29e
commit dd6ef5d
Show file tree

Hide file tree

Showing 2 changed files with 174 additions and 5 deletions.
diff --git a/css/backface-visibility/demos/index.html b/css/backface-visibility/demos/index.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title>Работа свойства — backface-visibility — Дока</title>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <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 {
+      color-scheme: dark;
+    }
+
+    body {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      min-height: 100vh;
+      background-color: #18191C;
+      color: #FFFFFF;
+      font-family: "Roboto", sans-serif;
+    }
+
+    h1 {
+      margin-bottom: 20px;
+    }
+
+    .card {
+      width: 500px;
+      height: 180px;
+      perspective: 1000px;
+    }
+
+    .card-inner {
+      position: relative;
+      width: 100%;
+      height: 100%;
+      text-align: center;
+      transition: transform 1s;
+      transform-style: preserve-3d;
+    }
+
+    .card:hover .card-inner {
+      transform: rotateY(180deg);
+    }
+
+    .card-side {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      backface-visibility: hidden;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #000000;
+      font-size: 24px;
+    }
+
+    .card-front {
+      background-color: #2E9AFF;
+    }
+
+    .card-back {
+      background-color: #F498AD;
+      transform: rotateY(180deg);
+    }
+
+    .controls {
+      margin-top: 30px;
+    }
+
+    label {
+      margin-inline-end: 55px;
+      font-size: 24px;
+      font-weight: 500;
+      line-height: 1;
+    }
+
+    select {
+      min-width: 210px;
+      padding: 10px;
+      font-size: 18px;
+      font-family: inherit;
+    }
+
+    @media (max-width: 768px) {
+      body {
+        padding: 30px;
+      }
+
+      .card {
+        width: 100%;
+        max-width: 500px;
+      }
+
+      label {
+        display: block;
+        margin-inline-end: auto;
+        margin-block-end: 10px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <div class="card-inner">
+      <div class="card-side card-front">Передняя часть</div>
+      <div class="card-side card-back">Задняя часть</div>
+    </div>
+  </div>
+
+  <div class="controls">
+    <label for="visibility-select">backface-visibility:</label>
+    <select id="visibility-select">
+      <option value="hidden" selected>hidden</option>
+      <option value="visible">visible</option>
+    </select>
+  </div>
+
+  <script>
+    const cardSides = document.querySelectorAll('.card-side');
+    const select = document.getElementById('visibility-select');
+
+    select.addEventListener('change', function () {
+      const value = this.value;
+      cardSides.forEach(side => {
+        side.style.backfaceVisibility = value;
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/css/backface-visibility/index.md b/css/backface-visibility/index.md
@@ -2,7 +2,7 @@
 title: "`backface-visibility`"
 description: "Если создаёте 3D-трансформацию, не забывайте про изнанку элемента."
 authors:
-  - doka-dog
+  - ra1nbow1
 keywords:
   - видимость задней части
 related:
@@ -11,16 +11,44 @@ related:
   - css/perspective
 tags:
   - doka
-  - placeholder
 ---
 
 ## Кратко
 
-Свойство `backface-visibility` управляет видимостью задней части элемента, если он поворачивается относительно пользователя с помощью свойства [`transform`](/css/transform/). Это нужно только для 3D-трансформаций, для 2D-трансформаций свойство не имеет эффекта.
+Свойство `backface-visibility` управляет видимостью задней части элемента, если тот развёрнут относительно пользователя с помощью свойства [`transform`](/css/transform/). Это нужно только для 3D-трансформаций, для 2D-трансформаций свойство не имеет эффекта. Оно используется для создания более реалистичных 3D-сцен, скрывая изнанку объектов при их вращении.
+
+## Пример
+
+Задняя сторона будет скрыта:
+
+```css
+.element {
+  transform: rotateY(180deg);
+  backface-visibility: hidden;
+}
+```
+
+<iframe title="Работа свойства" src="demos/" height="500"></iframe>
 
 ## Как пишется
 
 Есть всего два возможных значения:
 
-- `visible` — задняя сторона элемента видна (значение по умолчанию).
-- `hidden` — задняя сторона элемента не видна.
+- `visible` — значение по умолчанию, задняя сторона элемента видна. Например, при вращении элемента на 180 градусов его задняя часть будет отображаться;
+- `hidden` — задняя сторона элемента не видна. Это полезно, когда вы хотите скрыть обратную сторону элемента при его вращении, что создаёт иллюзию, будто элемент исчезает, когда повёрнут спиной.
+
+## Как понять
+
+Свойство `backface-visibility` работает исключительно в 3D-пространстве и не влияет на элементы, которые трансформируются только в двух измерениях. Это свойство становится важным, когда элементы вращаются вокруг оси _x_, _y_ или одновременно вокруг обеих осей, создавая видимость «изнанки».
+
+### Связь с `transform-style`
+
+Чтобы `backface-visibility` работало корректно, необходимо учитывать свойство [`transform-style`](/css/transform-style/), которое должно быть установлено в значение `preserve-3d` на родительском элементе. Это позволяет сохранять 3D-контекст для дочерних элементов при их трансформациях.
+
+## Подсказки
+
+💡 `backface-visibility` не наследуется от родительских элементов. Для каждого элемента нужно отдельно задать это свойство, если оно требуется.
+
+💡 Используйте `backface-visibility: hidden`, если элемент должен выглядеть как односторонний. Это часто применяется для карточек в анимациях «переворота», чтобы задняя часть карточки не отображалась, пока она не будет явно повёрнута.
+
+💡 Помните, что `backface-visibility` не влияет на элементы, которые не участвуют в 3D-трансформациях, поэтому перед его использованием убедитесь, что элемент вращается в 3D.