css властивість backface-visibility
Властивість backface-visibility визначає, чи показувати віддзеркалення елемента чи ні. Як правило, зворотна сторона стає видна при трансформації елемента. Тобто вміст елемента стає відвернутий обличчям від користувача (це як намалювати якесь слово на склі - з однієї сторони воно відображається правильно, а з іншої - слово буде читатися ззаду наперед).
На цьому прикладі, ми бачимо три елементи: перший у нас як зразок, для другого встановлено transform і backface-visibility: visible;, для третього - backface-visibility: hidden;, тому ми його і не бачимо (він відвернутий від нас обличчям).
У звичайній ситуації властивість backface-visibility не впливає на відображення елемента.
Ця властивість зі значенням hidden позитивно впливає на швидкість завантаження сторінки, тому що браузеру не потрібно відмальовувати елемент з оберненим вмістом.
- Нотатка
-
Зверніть увагу, що ця технологія експериментальна, й може не працювати в деяких браузерах. Синтаксис і поведінка
автор: NagarDbackface-visibilityможе змінюватися у майбутньому.
Синтаксис
backface-visibility: visible|hidden|initial|inherit;Властивість backface-visibility може отримувати 4 значень:
-
visible -
Віддзеркалення елемента видно.
автор: NagarD -
hidden -
Звонотній бік елемента приховано.
автор: NagarD -
initial -
Встановлює властивість у значення без задання
автор: NagarD -
inherit -
Вказує на спадковість властивості від свого батьківського елемента (якщо відповідна властивість встановлена)
автор: NagarD
| Значення без задання: | visible |
|---|---|
| Наслідує: | Ні |
| Анімується: | Ні |
| JavaScript синтаксис: | object.style.backfaceVisibility="hidden" |
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 36 | 16 | 15.4 | 23 | 12 | 10 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 37 | 36 | 16 | 15.4 |
Приклади
+ запропонувати свій приклад у пісочниці
Обидві картки обертаються навколо осі Y. Ліва з visible показує дзеркальний зворотний бік, права з hidden зникає, щойно повертається «спиною» до глядача.
HTML
<div class="scene"><div class="card show">visible</div></div>
<div class="scene"><div class="card hide">hidden</div></div>CSS
.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); }
}Демонстрація різних значень у дії
Простий приклад роботи властивості
Коментарі
Коментарів ще немає — будьте першим!