CSS :: Свойство transform-style

css-свойство transform-style (от англ. transform style – стиль трансформации) применяется к родительскому контейнеру и определяет, как дочерние трансформируемые элементы будут отображаться в 3D-пространстве. Свойство должно использоваться совместно с transform.

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

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

Синтаксис

transform-style: flat | preserve-3d

Значения

flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
preserve-3d – будут трансформироваться в своем собственном 3D-пространстве.

Ссылки

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

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

Подробно о трансформации элементов в нашем учебнике здесь.

Примеры

HTML Результат

htmlCodes

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

	<style>
				
		/* Оформляем самый внешний div */
		.div_out{
		width: 600px;
		height: 900px;
		margin: auto;		
		padding: 20px;
		background-color: #DFDFDF;
		border-radius: 5px;
		}
		
		/* Оформляем родительские div'ы абзацев */
		.parent_p{
		width: 400px;
		height: 200px;
		margin: auto;		
		margin-top: 20px;
		padding: 20px;
		background-color: #F3F3F3;
		border-radius: 5px;
		transform: perspective(200px) rotateX(0.3rad);
		}
		
		/* Оформляем возможность самостоятельной 
			трансформации дочернего абзаца */
		.three_d{
		transform-style: preserve-3d;
		}
				
		/* Это общий стиль абзацев */		
		p{
		width: 320px;
		height: 150px;
		margin: auto;
		padding: 20px;
		background-color: #55aa55;
		border-radius: 5px;
		text-align: center;
		font-weight: bold;
		color: #F9F9F9;
		transform: rotateX(-150deg);
		}
		
	</style>
		
</head>
<body>
		
	<div class="div_out">
		
		<div class="parent_p">
					
			<p>
				Этот абзац трансформируется в <br>
				2D-пространстве своего родителя: <br>
				transform-style: flat (по умолчанию)
			</p>
									
		</div>
				
		<div class="parent_p three_d">
						
			<p>
				Этот абзац трансформируется в <br>
				собственном 3D-пространстве: <br>
				transform-style: preserve-3d
			</p>
						
		</div>

		<div style="margin-top: 5em">
			Итак, у нас имеется обычный общий «div» (темно-серый фон), 
			в котором расположены два других «div», которые подвергаются 
			идентичной трансформации поворота вокруг оси X. Оба этих блока 
			имеют еще и по одному дочернему абзацу, которые мы также 
			пытаемся подвергнуть дополнительной 3D-трансформации поворота 
			вокруг оси X (она лежит в плоскости родительского для текущего 
			абзаца элемента). Однако, если в нижнем блоке мы видим, что 
			абзац дополнительно повернулся (как мы и ожидали), то в верхнем 
			блоке мы поворота не увидели. Вместо этого мы увидели какую-то 
			2D-трансформацию, получившуюся в результате проецирования точек 
			третьего измерения на плоскость родительского элемента. Это 
			связано с тем, что в нижнем блоке мы активировали для абзаца 
			собственное 3D-пространство при помощи класса three_d. 
		</div> 
		
	</div>
	
</body>
</html>

Пример №1