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

CSS свойства

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

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

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

СвойствоChrome
Chrome
Firefox
Firefox
Opera
Opera
Safari
Safari
Internet Explorer
IExplorer
Microsoft Edge
Edge
backface-visibilitycss336.0
12.0
-webkit-
16.0
10.0
-moz-
23.0
15.0
-webkit-
4.0
-webkit-
10.012.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 свойства backface-visibility(отображение задней стороны элемента при трансформации в CSS).
Пример использования CSS свойства backface-visibility(отображение задней стороны элемента при трансформации в CSS).
CSS свойства