css властивість backface-visibility


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

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

Властивість `backface-visibility`

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

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

Нотатка:

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

Синтакс

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

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

visible

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

hidden

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

initial

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

inherit

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

Значення без задання: visible
Наслідує: Ні
Анімується: Ні
JavaScript синтаксис: object.style.backfaceVisibility="hidden"

Переглядачі

Переглядач
backface-visibility

36.0
12.0 -webkit-

10.0

16.0
5.0 -moz-

9.0
4.0 -webkit-

23.0
15.0 -o-

12.0

Переглядач
backface-visibility

3.0 -webkit-

16.0
10.0 -moz-

9.0
3.2 -webkit-

Приклади


Демонстрація різних значень у дії

Простий приклад роботи властивості

Визначає видимість елементу при обертанні

div { 
  -webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */ 
  backface-visibility: hidden; 
}

Додаткові посилання

Всі Коментарі (0)

Зареєструйся на сайті, аби мати змогу залишати коментарі. Зареєструватися  чи
Немає Коментарів