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

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

Характеристики

Значение по умолчанию: visible.
Применяется: к трансформируемым элементам.
Наследуется: нет.
Анимируется: нет.
JavaScript: object.style.backfaceVisibility="value".

Синтаксис

backface-visibility: visible | hidden

Значения

visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию).
hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).

Ссылки

Официальный сайт W3C: https://drafts.csswg.org/css-transforms-2/#backface-visibility-property

Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/backface-visibility

Примеры

HTML Результат

htmlCodes

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">  
	<meta name="robots" content="noindex">
	<title>Пример №1</title>

	<style>
				
		/* Оформляем родительский «div» абзацев */
		div{
		width: 550px;
		height: 550px;
		margin: auto;		
		padding: 40px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		margin: auto;
		margin-top: 20px;
		padding: 30px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		transform: rotateX(170deg);
		}

		/* Это класс 1-го трансформируемого абзаца */	
		.p_1{backface-visibility: visible;}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p_2{backface-visibility: hidden;}	
		
	</style>
		
</head>
<body>
			
	<div>
				
		<p class="p_1">
			1-й трансформированный абзац: <br>
			backface-visibility: visible
		</p>
		
		<p class="p_2">
			2-й трансформированный абзац: <br>
			backface-visibility: hidden
		</p>
			
	</div>
	
</body>
</html>

Пример №1