CSS свойство backface-visibility

Определение и применение

CSS свойство backface-visibility определяет, должна ли быть видна задняя сторона элемента или нет. Данное свойство применяется для того, чтобы при трансформации элемента скрыть его заднюю сторону, а не отображать её зеркально (значение по умолчанию).

Поддержка браузерами

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
backface-visibility	36.0 12.0 -webkit-	16.0 10.0 -moz-	23.0 15.0 -webkit-	4.0 -webkit-	10.0	12.0

CSS синтаксис:

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

JavaScript синтаксис:

object.style.backfaceVisibility = "visible"

Значения свойства

Значение	Описание
visible	Задняя сторона элемента видна (отображается). Это значение по умолчанию.
hidden	Задняя сторона элемента скрыта (не отображается).
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
<title>Отображение задней стороны элемента при трансформации в CSS</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 200px; /* устанавливаем ширину блока */
height : 200px; /* устанавливаем высоту блока */
margin : 50px; /* устанавливаем величину внешнего отступа для всех сторон элемента */
font-size: 32px;  /* устанавливаем размер шрифта */
text-align: center;  /* выравниваем текст по центру */
line-height: 200px;  /* для выравнивания текста по вертикали устанавливаем междустрочный интервал равным высоте элемента */
} 

@-webkit-keyframes iliketomoveit { /* для поддержки ранних версий браузеров */ 
		100% { 
			-moz-transform : rotateY(360deg);  /* для поддержки ранних версий браузеров */ 
			-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ 
			-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ 
			transform : rotateY(360deg); /* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
			} 
	} 
@keyframes iliketomoveit { 
		100% { 
			-moz-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ 
			-webkit-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ 
			-ms-transform : rotateY(360deg); /* для поддержки ранних версий браузеров */ 
			transform : rotateY(360deg);/* двухмерное преобразование путем поворота элемента по часовой стрелке на 360 градусов */
			} 
}
.test {
-webkit-animation : iliketomoveit 5s linear infinite; /* для поддержки ранних версий браузеров */ 
animation : iliketomoveit 5s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ 
background : green;  /* устанавливаем цвет заднего фона */
-webkit-backface-visibility : visible; /* для поддержки ранних версий браузеров */ 
-moz-backface-visibility : visible; /* для поддержки ранних версий браузеров */ 
backface-visibility : visible; /* задняя сторона элемента видна (отображается) - это значение по умолчанию */ 
}
.test2 {
-webkit-animation : iliketomoveit 5s linear infinite; /* для поддержки ранних версий браузеров */ 
animation : iliketomoveit 5s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ 
background : orange;  /* устанавливаем цвет заднего фона */
-webkit-backface-visibility : hidden; /* для поддержки ранних версий браузеров */ 
-moz-backface-visibility : hidden; /* для поддержки ранних версий браузеров */ 
backface-visibility : hidden; /* задняя сторона элемента скрыта (не отображается) */ 
}
</style>
</head>
	<body>
		<div class = "test">
			VISIBLE
		</div>
		<div class = "test2">
			HIDDEN
		</div>
	</body>
</html>

CSS свойства