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

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

CSS свойство transform-style определяет как вложенные (дочерние) элементы отображаются в трехмерном пространстве. По умолчанию все дочерние элементы отображаются плоскими в двухмерной плоскости (находятся в плоскости самого элемента), чтобы позволить вложенным (дочерним) элементам трансформироваться в их собственной трёхмерной плоскости необходимо использовать значение preserve-3d свойства transform-style.

Совместно со свойством transform-style используется свойство transform css3 , которое применяет двухмерные или трехмерные трансформации к элементу (функции преобразования элемента).

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

Свойство	Chrome	Firefox	Opera	Safari	IExplorer	Edge
transform-style	36.0 12.0 -webkit-	16.0 10.0 -moz-	23.0 15.0 -webkit-	9.0 4.0 -webkit-	11.0*	12.0

Internet Explorer не поддерживает значение свойства preserve-3d.

CSS синтаксис:

transform-style:"flat | preserve-3d | initial | inherit";

JavaScript синтаксис:

object.style.transformStyle = "preserve-3d"

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

Значение	Описание
flat	Вложенные (дочерние) элементы отображаются плоскими в двухмерной плоскости (находятся в плоскости самого элемента). Это значение по умолчанию.
preserve-3d	Вложенные (дочерние) элементы трансформируются в их собственной трёхмерной плоскости.
initial	Устанавливает свойство в значение по умолчанию.
inherit	Указывает, что значение наследуется от родительского элемента.

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

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

<!DOCTYPE html>
<html>
<head>
<title>Отображение дочерних элементов в трехмерном пространстве в CSS</title>
<style> 
div {
width : 200px; /* устанавливаем ширину блока */
height : 200px; /* устанавливаем высоту блока */
border: 1px solid white;  /* устанавливаем сплошную границу размером 1 пиксель белого цвета */
} 
.static {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
background: silver;  /* устанавливаем цвет заднего фона */
margin : 50px; /* устанавливаем величину внешнего отступа для всех сторон элемента */
-webkit-perspective: 500px;  /* для поддержки ранних версий браузеров */
-moz-perspective: 500px;  /* для поддержки ранних версий браузеров */
perspective: 500px;  /* определяет, на сколько пикселей удален трехмерный элемент от точки обзора */
} 
@-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 15s linear infinite; /* для поддержки ранних версий браузеров */ 
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ 
background : green;  /* устанавливаем цвет заднего фона */
transform-style : flat; /* вложенные (дочерние) элементы отображаются плоскими в двухмерной плоскости(это значение по умолчанию) */ 
}
.test2 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */ 
animation : iliketomoveit 15s linear infinite; /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ 
background : orange;  /* устанавливаем цвет заднего фона */
}
.test3 {
-webkit-animation : iliketomoveit 15s linear infinite; /* для поддержки ранних версий браузеров */ 
animation : iliketomoveit 15s linear infinite;  /* имя анимации, указанное в ключевом кадре, длительность анимации, с одинаковой скоростью, бесконечно */ 
background : green;  /* устанавливаем цвет заднего фона */
-webkit-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */ 
-moz-transform-style : preserve-3d; /* для поддержки ранних версий браузеров */ 
transform-style : preserve-3d; /* вложенные (дочерние) элементы трансформируются в их собственной трёхмерной плоскости */ 
}
</style>
</head>
	<body>
		<div class = "static">
			<b>transform-style: flat;</b>
			<div class = "test">
				<div class = "test2">
				</div>
			</div>
		</div>
		<div class = "static">
			<b>transform-style: preserve-3d;</b>
			<div class = "test3">
				<div class = "test2">
				</div>
			</div>
		</div>
	</body>
</html>

CSS свойства