w3docs logo

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

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

Если задано значение "visible", задняя сторона элемента становится видимым. Значение "hidden" скрывает заднюю сторону элемента.

Значение по умолчанию visible
Применяется К трансформируемым элементам.
Наследуется Нет
Анимируемое Нет
Версия CSS3
DOM синтаксис object.style.backfaceVisibility = "hidden";

Синтаксис

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .element {
      width: 200px;
      height: 200px;
      background: #666;
      color: #eee;
      backface-visibility: visible;
      -webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
      animation: element 2s infinite linear alternate;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      to {-webkit-transform: rotateY(180deg);}
      }
      }
    </style>
  </head>
  <body>
    <h2>Пример свойства backface-visibility.</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

В вышеприведенном примере установлено значение "visible".

Пример, где задано значение "hidden":

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</title>
    <style> 
      .element {
      width: 200px;
      height: 200px;
      background: #1c87c9;
      color: #8ebf42;
      backface-visibility: hidden;
      -webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
      animation: element 2s infinite linear alternate;
      }
      /* Safari 4.0 - 8.0 */
      @-webkit-keyframes element {
      to {-webkit-transform: rotateY(180deg);}
      }
      }
    </style>
  </head>
  <body>
    <h2>Пример со значением hidden.</h2>
    <div class="element">
      <h2>Hello world!</h2>
    </div>
  </body>
</html>

Значения

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

Поддержка браузера

chrome firefox safari opera
36.0+
12.0-35.0 -webkit- 		16.0+
10.0-15.0 -moz- 		4.0+
-webkit- 		23.0+
15.0-22.0 -webkit-

Практикуйте свои знания

Какое свойство CSS контролирует видимость обратной стороны элемента при его преобразовании?
Считаете ли это полезным?