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

Определение и применение

CSS свойство backface-visibility определяет, должна ли быть видна задняя сторона элемента или нет. Данное свойство применяется для того, чтобы при трансформации элемента скрыть его заднюю сторону, а не отображать её зеркально (значение по умолчанию).

Свойство задают самому трансформируемому элементу. Обратная сторона — зеркальное отображение его лицевой стороны, а не отдельная поверхность с другим содержимым. Разница между значениями заметна при 3D-повороте, например transform: rotateY(180deg); обычный rotate(180deg) не разворачивает элемент обратной стороной к зрителю. Место элемента в раскладке при скрытии сохраняется.

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

Попробуйте значения backface-visibility

<div class="stage">
  <div class="demo-target">CSS</div>
</div>

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: rotateY(180deg);
  backface-visibility: visible;
}

* {
  box-sizing: border-box;
}
.stage {
  width: 100%;
  max-width: 300px;
  height: 210px;
  display: grid;
  place-items: center;
  padding: 20px;
  border: 2px dashed #607589;
  background: #edf2f5;
  color: #172c3d;
  font: 16px/1.4 system-ui;
}
.demo-target {
  width: 100px;
  height: 80px;
  display: grid;
  place-items: center;
  border: 3px solid #245a85;
  background: #ffe4bd;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

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

Спецификация: CSS transforms-2

✓Поддерживается во всех основных браузерах с 2022 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьcss.properties.backface-visibility

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
backface-visibility	✓36…	✓12…	✓16…	✓23…	✓15.4…	✓36…	✓16…	✓24…	✓15.4…	✓3.0…	✓37…	✓15.4…
hidden	✓12	✓12	✓10	✓15	✓5.1	✓18	✓10	✓14	✓5	✓1.0	✓4.4	✓5
visible	✓12	✓12	✓10	✓15	✓5.1	✓18	✓10	✓14	✓5	✓1.0	✓4.4	✓5

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

CSS синтаксис:

backface-visibility: visible | hidden;

/* Глобальные значения */
backface-visibility: initial | inherit | unset | revert | revert-layer;

Знак | разделяет допустимые значения.

JavaScript синтаксис:

element.style.backfaceVisibility = "visible";

Начальное значение свойства

visible.

Значения свойства

Спецификация

CSS Transforms Module Level 2.

Наследуется

Нет.

Анимируемое

Тип анимации — дискретный: значение переключается без плавных промежуточных положений.

Примеры, попробуйте сами

Преобразование в пространстве

Сначала видна лицевая сторона карточки. Включите поворот флажком: при hidden карточка исчезнет, но её место сохранится. Затем замените hidden на visible и снова включите поворот после обновления результата — появится зеркальная оборотная сторона. Снимите флажок, чтобы снова увидеть лицевую сторону.

base.css

CSS

* {
    box-sizing: border-box;
}
body {
    margin: 16px;
    font:
        16px/1.5 system-ui,
        sans-serif;
    color: #172c3d;
}
section {
    margin-bottom: 24px;
    min-width: 0;
}
h3 {
    margin: 0 0 12px;
    font-size: 16px;
}
.item {
    padding: 8px;
    min-width: 0;
    background: #c5dbea;
    border: 1px solid #35658a;
    overflow-wrap: anywhere;
}
.scene {
    margin: 32px;
    height: 170px;
}
.card {
    width: 120px;
    height: 110px;
    background: #c5dbea;
    border: 2px solid #35658a;
    padding: 12px;
}
.inner {
    background: #edcf99;
}

index.html

HTML

<!doctype html>
<html lang="ru">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Преобразование в пространстве</title>
  </head>
  <body>
    <input id="turn" type="checkbox" />
    <label for="turn">Применить поворот</label>
    <div class="scene">
      <div class="card">
        Лицевая сторона
        <div class="inner">Дочерний блок</div>
      </div>
    </div>
  </body>
</html>

style.css

CSS

.scene {
    perspective: 400px;
}
.card {
    backface-visibility: hidden;
}
#turn:checked ~ .scene .card {
    transform: rotateY(180deg);
}