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.