backface-visibility | Справочник CSS
http://belarusweb.net
Основы создания сайтов

backface-visibility

Описание

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

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

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

Синтаксис

backface-visibility: visible | hidden

Значения

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

Ссылки

Примеры

HTML Результат BwCodes
<!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-го трансформируемого абзаца */	
		.p1{backface-visibility: visible;}
		
		/* Это класс 2-го трансформируемого абзаца */	
		.p2{backface-visibility: hidden;}	
		
	</style>
		
</head>
<body>
			
	<div>
				
		<p class="p1">
			1-й трансформированный абзац: <br>
			backface-visibility: visible
		</p>
		
		<p class="p2">
			2-й трансформированный абзац: <br>
			backface-visibility: hidden
		</p>
			
	</div>
	
</body>
</html>

Пример №1