Свойство backface-visibility определяет, должна ли быть видна задняя сторона элемента. Задняя сторона элемента является зеркальным отображением передней стороны. Если элемент повернут, вы можете сами определить, будет ли задняя сторона элемента видна пользователю или нет. Свойство имеет две значения - visible и hidden.
Если задано значение "visible", задняя сторона элемента становится видимым. Значение "hidden" скрывает заднюю сторону элемента.
Значение по умолчанию | visible |
Применяется | К трансформируемым элементам. |
Наследуется | Нет |
Анимируемое | Нет |
Версия | CSS3 |
DOM синтаксис | object.style.backfaceVisibility = "hidden"; |
Синтаксис
backface-visibility: visible | hidden | initial | inherit;
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.element {
width: 200px;
height: 200px;
background: #666;
color: #eee;
backface-visibility: visible;
-webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
animation: element 2s infinite linear alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
to {-webkit-transform: rotateY(180deg);}
}
}
</style>
</head>
<body>
<h2>Пример свойства backface-visibility.</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
В вышеприведенном примере установлено значение "visible".
Пример, где задано значение "hidden":
Пример
<!DOCTYPE html>
<html>
<head>
<title>Заголовок документа</title>
<style>
.element {
width: 200px;
height: 200px;
background: #1c87c9;
color: #8ebf42;
backface-visibility: hidden;
-webkit-animation: element 2s infinite linear alternate; /* Safari 4.0 - 8.0 */
animation: element 2s infinite linear alternate;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes element {
to {-webkit-transform: rotateY(180deg);}
}
}
</style>
</head>
<body>
<h2>Пример со значением hidden.</h2>
<div class="element">
<h2>Hello world!</h2>
</div>
</body>
</html>
Значения
Значение | Описание |
---|---|
visible | Задняя сторона элемента будет видна. Значение по умолчанию. |
hidden | Задняя сторона элемента будет скрыта. |
initial | Устанавливает свойство в значение по умолчанию. |
inherit | Значение элемента наследуется от родительского элемента. |
Поддержка браузера
36.0+ 12.0-35.0 -webkit- |
16.0+ 10.0-15.0 -moz- |
4.0+ -webkit- |
23.0+ 15.0-22.0 -webkit- |
Практикуйте свои знания
Какое свойство CSS контролирует видимость обратной стороны элемента при его преобразовании?
Правильный!
Неправильно!