W3docs
ru
Войти

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

Свойство backface-visibility определяет, видна ли задняя сторона элемента. Примеры и демонстрации для самостоятельного изучения.

Свойство CSS backface-visibility управляет тем, отображается ли задняя сторона элемента, когда тот повёрнут от наблюдателя. У каждого элемента есть две стороны: лицевая (то, что вы обычно видите) и задняя, которая становится видимой, когда элемент повёрнут более чем на 90 градусов вокруг оси X или Y в трёхмерном пространстве. По умолчанию задняя сторона является зеркальным отражением лицевой, но с помощью этого свойства её можно полностью скрыть.

Свойство имеет видимый эффект только в контексте трёхмерного преобразования — то есть когда элемент (или его родитель) повёрнут с помощью transform через rotateX(), rotateY() или rotate3d(), как правило в сочетании с transform-style: preserve-3d на родительском элементе. Свойство принимает два ключевых значения:

  • visible (значение по умолчанию) — задняя сторона отрисовывается и отображается как зеркальная копия лицевой.
  • hidden — задняя сторона не отрисовывается. Когда элемент поворачивается ребром, он исчезает, а не показывает свою обратную сторону.

Наиболее распространённое применение — создание интерфейсов с переворачивающейся карточкой, где два элемента расположены спиной друг к другу и поворачиваются на 180 градусов. Установка backface-visibility: hidden на обоих предотвращает просвечивание задней части лицевого элемента, поэтому показывается только та сторона, которая в данный момент обращена к зрителю.

Свойство backface-visibility входит в число свойств CSS3.

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

Синтаксис

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

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

В приведённых ниже примерах квадрат анимируется с вращением вокруг оси Y. При значении visible текст можно прочитать в зеркальном отражении, когда блок поворачивается к вам задней стороной. При значении hidden блок исчезает в той половине вращения, когда его задняя сторона обращена к вам. Обратите внимание на разницу в поведении каждого блока при вращении.

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

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

<!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>
Попробуйте сами »

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

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

<!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>
Попробуйте сами »

Создание переворачивающейся карточки

Практическое применение backface-visibility — карточка, которая переворачивается при наведении курсора, открывая свою другую сторону. Лицевая и задняя стороны располагаются в одном месте; значение hidden не даёт обратной стороне лицевой части просвечиваться после того, как карточка повернулась более чем на 90 градусов.

<!DOCTYPE html>
<html>
  <head>
    <title>Flip card</title>
    <style>
      .scene {
        width: 200px;
        height: 260px;
        perspective: 800px;
      }
      .card {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
      }
      .scene:hover .card {
        transform: rotateY(180deg);
      }
      .card-face {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: #fff;
        /* Hide the mirrored reverse of each face */
        backface-visibility: hidden;
      }
      .card-front {
        background: #1c87c9;
      }
      .card-back {
        background: #8ebf42;
        transform: rotateY(180deg);
      }
    </style>
  </head>
  <body>
    <div class="scene">
      <div class="card">
        <div class="card-face card-front">Front</div>
        <div class="card-face card-back">Back</div>
      </div>
    </div>
  </body>
</html>

Советы и подводные камни

  • backface-visibility не оказывает никакого эффекта в плоской (2D) раскладке. Элемент должен быть частью трёхмерного преобразования — задайте родительскому элементу transform-style: preserve-3d и используйте perspective, чтобы вращение воспринималось как глубина.
  • В переворачивающейся карточке устанавливайте backface-visibility: hidden на обеих сторонах. Если забыть об одной стороне, её зеркальное изображение будет просвечивать сквозь другую.
  • Задняя сторона является истинным зеркальным отражением лицевой, поэтому любой текст на ней читается в обратном порядке при значении visible.
  • Свойство не анимируется — оно мгновенно переключает состояния, — однако само вращение, открывающее или скрывающее заднюю сторону, можно анимировать с помощью transform и CSS анимаций.

Значения

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

Практика

Практика
Что делает свойство CSS backface-visibility?
Что делает свойство CSS backface-visibility?
Was this page helpful?