backface-visibility

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨март 2022 г.⁩.

Экспериментальная возможность: Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство backface-visibility определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.

Интерактивный пример

backface-visibility: visible;

backface-visibility: hidden;

<section class="default-example" id="default-example">
 <div id="example-element">
 <div class="face front">1</div>
 <div class="face back">2</div>
 <div class="face right">3</div>
 <div class="face bottom">6</div>
 </div>
</section>

#default-example {
 background: linear-gradient(skyblue, khaki);
}
#example-element {
 width: 100px;
 height: 100px;
 perspective: 550px;
 perspective-origin: 220% 220%;
 transform-style: preserve-3d;
}
.face {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 position: absolute;
 backface-visibility: inherit;
 background: rgba(0, 0, 0, 0.4);
 font-size: 60px;
 color: white;
}
.front {
 transform: translateZ(50px);
}
.back {
 background: rgb(230, 0, 0);
 color: white;
 transform: rotateY(180deg) translateZ(50px);
}
.right {
 background: rgba(0, 0, 0, 0.6);
 transform: rotateY(90deg) translateZ(50px);
}
.bottom {
 background: rgba(0, 0, 0, 0.6);
 transform: rotateX(-90deg) translateZ(50px);
}

Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)

Синтаксис

css

/* Ключевые слова */
backface-visibility: visible;
backface-visibility: hidden;
/* Глобальные значения */
backface-visibility: inherit;
backface-visibility: initial;
backface-visibility: unset;

Свойство backface-visibility указывается в качестве одного из ключевых слов, перечисленных ниже.

Значения

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

Официальный синтаксис

backface-visibility = 
 visible | 
 hidden

Пример

В этом примере показан куб с прозрачными гранями.

HTML

html

<table>
 <tr>
 <th><code>backface-visibility: visible;</code></th>
 <th><code>backface-visibility: hidden;</code></th>
 </tr>
 <tr>
 <td>
 <div class="container">
 <div class="cube showbf">
 <div class="face front">1</div>
 <div class="face back">2</div>
 <div class="face right">3</div>
 <div class="face left">4</div>
 <div class="face top">5</div>
 <div class="face bottom">6</div>
 </div>
 </div>
 <p>
 Since all faces are partially transparent, the back faces (2, 4, 5) are
 visible through the front faces (1, 3, 6).
 </p>
 </td>
 <td>
 <div class="container">
 <div class="cube hidebf">
 <div class="face front">1</div>
 <div class="face back">2</div>
 <div class="face right">3</div>
 <div class="face left">4</div>
 <div class="face top">5</div>
 <div class="face bottom">6</div>
 </div>
 </div>
 <p>The three back faces (2, 4, 5) are hidden.</p>
 </td>
 </tr>
</table>

CSS

css

/* Классы, которые будут показывать или скрывать
 три задние грани "куба" */
.showbf div {
 backface-visibility: visible;
}
.hidebf div {
 backface-visibility: hidden;
}
/* Определяет контейнер div, кубический div и общую грань */
.container {
 width: 150px;
 height: 150px;
 margin: 75px 0 0 75px;
 border: none;
}
.cube {
 width: 100%;
 height: 100%;
 perspective: 550px;
 perspective-origin: 150% 150%;
 transform-style: preserve-3d;
}
.face {
 display: block;
 position: absolute;
 width: 100px;
 height: 100px;
 border: none;
 line-height: 100px;
 font-family: sans-serif;
 font-size: 60px;
 color: white;
 text-align: center;
}
/* Определяет каждое лицо на основе направления */
.front {
 background: rgba(0, 0, 0, 0.3);
 transform: translateZ(50px);
}
.back {
 background: rgba(0, 255, 0, 1);
 color: black;
 transform: rotateY(180deg) translateZ(50px);
}
.right {
 background: rgba(196, 0, 0, 0.7);
 transform: rotateY(90deg) translateZ(50px);
}
.left {
 background: rgba(0, 0, 196, 0.7);
 transform: rotateY(-90deg) translateZ(50px);
}
.top {
 background: rgba(196, 196, 0, 0.7);
 transform: rotateX(90deg) translateZ(50px);
}
.bottom {
 background: rgba(196, 0, 196, 0.7);
 transform: rotateX(-90deg) translateZ(50px);
}
/* Сделает стол немного лучше */
th,
p,
td {
 background-color: #eeeeee;
 margin: 0px;
 padding: 6px;
 font-family: sans-serif;
 text-align: left;
}

Результат

[フレーム]

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

Specification
CSS Transforms Module Level 2 # backface-visibility-property

Начальное значение	`visible`
Применяется к	трансформируемые элементы
Наследуется	нет
Обработка значения	как указано
Animation type	discrete

Совместимость с браузерами

Смотрите также

Использование CSS преобразований

Help improve MDN

Learn how to contribute

This page was last modified on ⁨7 нояб. 2025 г.⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content