transform-style¶
Свойство transform-style
определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform
.
Трансформации
Синтаксис¶
/* Keyword values */
transform-style: preserve-3d;
transform-style: flat;
/* Global values */
transform-style: inherit;
transform-style: initial;
transform-style: unset;
Значения¶
flat
- Дочерние элементы лежат в той же плоскости, что и их родитель.
preserve-3d
- Дочерние элементы будут отображаться в 3D-пространстве.
Примечание¶
- Chrome до версии 36, Safari, Opera, Android и iOS поддерживают свойство
-webkit-transform-style
. - Firefox до версии 16 поддерживает свойство
-moz-transform-style
.
Значение по-умолчанию: flat
Применяется к трансформируемым элементам
Спецификации¶
Поддержка браузерами¶
CSS Transform 2D:
CSS Transform 3D:
Описание и примеры¶
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>transform-style</title>
<style>
.turn {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.turn:hover {
-webkit-transform: rotateY(45deg);
transform: rotateY(45deg);
}
</style>
</head>
<body>
<p>
<img src="image/igels.png" alt="Ёжик" class="turn" />
<img src="image/igels.png" alt="Ёжик" class="turn" />
</p>
</body>
</html>