Свойство CSS backface-visibility

Свойство backface-visibility определяет, должна ли задняя грань элемента быть видимой или нет. Задняя грань — это задняя сторона блока, которая становится видимой при повороте элемента на 180 градусов вокруг оси Y. Если элемент повернут, вы можете выбрать, показывать ли пользователю его заднюю грань или скрывать её. Для этого свойства используются два значения: visible и hidden.

Свойство backface-visibility является одним из свойств CSS3.

Значение visible делает заднюю грань видимой для пользователя. Значение hidden скрывает заднюю грань.

Начальное значение	visible
Применяется к	Трансформируемым элементам.
Наследуется	Нет.
Анимированное	Нет.
Версия	CSS3
Синтаксис DOM	object.style.backfaceVisibility = "hidden";

Синтаксис

Синтаксис CSS backface-visibility

css

backface-visibility: visible | hidden | initial | inherit;

Пример свойства backface-visibility со значением "visible":

Пример CSS backface-visibility со значением visible

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .element {
        width: 200px;
        height: 200px;
        background: #666;
        color: #eee;
        backface-visibility: visible;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>Backface-visibility property example</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

Try it Yourself »

Пример свойства backface-visibility со значением "hidden":

Пример CSS backface-visibility со значением hidden

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
    <style>
      .element {
        width: 200px;
        height: 200px;
        background: #1c87c9;
        color: #8ebf42;
        backface-visibility: hidden;
        transform-style: preserve-3d;
        -webkit-animation: element 2s infinite linear alternate;
        animation: element 2s infinite linear alternate;
      }
      @-webkit-keyframes element {
        to {
          -webkit-transform: rotateY(180deg);
        }
      }
      @keyframes element {
        to {
          transform: rotateY(180deg);
        }
      }
    </style>
  </head>
  <body>
    <h2>An example with hidden value</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

Try it Yourself »

Значения

Значение	Описание	Запустить
visible	Задняя грань видна. Это значение по умолчанию.	Запустить »
hidden	Задняя грань не видна.	Запустить »
initial	Устанавливает свойству его значение по умолчанию.
inherit	Наследует свойство от родительского элемента.

Практика

Что делает свойство CSS backface-visibility?

Оно определяет, должна ли задняя грань элемента быть видимой, когда она обращена к пользователю.Оно определяет размер шрифта элемента.Оно определяет цвет границы элемента.Оно предотвращает отображение перевёрнутой копии передней грани элемента.

Свойство CSS backface-visibility ​

Синтаксис ​

Пример свойства backface-visibility со значением "visible": ​

Пример свойства backface-visibility со значением "hidden": ​