From dd6ef5dec8303c73a8357bdb177f568f5c538f3c Mon Sep 17 00:00:00 2001 From: Matvey Romanov <38384967+ra1nbow1@users.noreply.github.com> Date: Thu, 24 Oct 2024 18:37:14 +0300 Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D1=8F?= =?UTF-8?q?=D0=B5=D1=82=20=D0=B4=D0=BE=D0=BA=D1=83=20=D0=BF=D1=80=D0=BE=20?= =?UTF-8?q?`backface-visibility`=20(#5525)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Добавляет доку про `backface-visibility` * Редактирует доку, меняет разделы местами * Добавил демо * Интегрировал iframe с демкой * Красит демку * Вычитывает --------- Co-authored-by: Alena Batitskaia Co-authored-by: Svetlana Korobtseva --- css/backface-visibility/demos/index.html | 141 +++++++++++++++++++++++ css/backface-visibility/index.md | 38 +++++- 2 files changed, 174 insertions(+), 5 deletions(-) create mode 100644 css/backface-visibility/demos/index.html diff --git a/css/backface-visibility/demos/index.html b/css/backface-visibility/demos/index.html new file mode 100644 index 0000000000..4e474faad1 --- /dev/null +++ b/css/backface-visibility/demos/index.html @@ -0,0 +1,141 @@ + + + + Работа свойства — backface-visibility — Дока + + + + + + + + +
+
+
Передняя часть
+
Задняя часть
+
+
+ +
+ + +
+ + + + diff --git a/css/backface-visibility/index.md b/css/backface-visibility/index.md index f343ba330e..bc57a31b56 100644 --- 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; +} +``` + + ## Как пишется Есть всего два возможных значения: -- `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.