CSS backface-visibility — зворотний бік елемента

Властивість backface-visibility визначає, чи показувати віддзеркалення елемента чи ні. Як правило, зворотна сторона стає видна при трансформації елемента. Тобто вміст елемента стає відвернутий обличчям від користувача (це як намалювати якесь слово на склі - з однієї сторони воно відображається правильно, а з іншої - слово буде читатися ззаду наперед).

На цьому прикладі, ми бачимо три елементи: перший у нас як зразок, для другого встановлено transform і backface-visibility: visible;, для третього - backface-visibility: hidden;, тому ми його і не бачимо (він відвернутий від нас обличчям).

У звичайній ситуації властивість backface-visibility не впливає на відображення елемента.

Ця властивість зі значенням hidden позитивно впливає на швидкість завантаження сторінки, тому що браузеру не потрібно відмальовувати елемент з оберненим вмістом.

правити

Загальний опис

правити

Нотатка

Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка backface-visibility може змінюватися у майбутньому.

автор: NagarD правити

+ додати пораду чи нотатку

Синтаксис

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

Властивість backface-visibility може отримувати 4 значень:

visible

Віддзеркалення елемента видно.

автор: NagarD

правити

hidden

Звонотній бік елемента приховано.

автор: NagarD

правити

initial

Встановлює властивість у значення без задання

автор: NagarD

правити

inherit

Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)

автор: NagarD

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	36	16	15.4	23	12	10

Підтримка: мобільні переглядачі

Переглядач
	37	36	16	15.4

Приклади

+ запропонувати свій приклад у пісочниці

<div class="scene"><div class="card show">visible</div></div>
<div class="scene"><div class="card hide">hidden</div></div>

.scene {
    display: inline-block;
    margin-right: 24px;
    perspective: 400px;
}

.card {
    width: 110px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background: #0172ad;
    color: #fff;
    animation: spin 4s linear infinite;
}

.show { backface-visibility: visible; }
.hide { backface-visibility: hidden; }

@keyframes spin {
    to { transform: rotateY(360deg); }
}

<div class="box">
	<p>text</p>
</div>

<div class="box">
	<p class="flip">text</p>
</div>

<div class="box">
	<p class="flip hide-back">text</p>
</div>

body {
  padding: 0 50px;
  font-size: 36px;  
}

.box {
	line-height: 75px;
	padding: 0 16px;
	background-color: #eee;
	margin-bottom: 16px;
}

.flip {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -ms-transform: rotateY(180deg);
    
  -webkit-backface-visibility: visible;
  -moz-backface-visibility:    visible;
  -ms-backface-visibility:     visible;
}

.flip.hide-back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  -ms-backface-visibility:     hidden;
}

<div class="rotate hidden">
  Я вмію крутитися
</div>
<div class="rotate">
  Я вмію крутитися
</div>

<p>Для цих двох блоків встановлено <code>transform</code>. Але при прокручуванні, "задню частину" видно тільку у другого блоку, тому що для першого задано <code>backface-visibility: hidden;</code>.</p>

body {
  font-family: sans-serif;
  line-height: 1.45;
  font-size: 17px;
}

.rotate {
  background-color: red;
  display: inline-block;
  color: #f1f1f1;
  padding: 36px;
  margin: 16px;
  font-style: italic;
  animation: rotate 5s linear 0s infinite normal none;
}

.rotate.hidden {
  backface-visibility: hidden;
}

@keyframes rotate {
  from {
    transform: rotateY(0deg); 
  }
  to {
    transform: rotateY(360deg);
  }
}

<div class="scene">
    <div class="card">
        <div class="face front">Лицьовий бік</div>
        <div class="face back">Зворотний бік</div>
    </div>
</div>

.scene {
    width: 200px;
    height: 120px;
    perspective: 700px;
}

.card {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.7s;
}

.scene:hover .card {
    transform: rotateY(180deg);
}

.face {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden;
    color: #fff;
}

.front {
    background: #0172ad;
}

.back {
    background: #d81b60;
    transform: rotateY(180deg);
}