Свойство CSS transform-style определяет расположение дочерних элементов в 3D пространстве.
У этого свойства всего два значения:
flat - дочерние элементы будут находиться в той же плоскости, что и их родитель.
preserve-3d - дочерние элементы будут позиционировать в 3D-пространстве.
Свойство transform-style целесообразно использовать совместно со свойствами transform, perspective и perspective-origin.
Рассмотрим transform-style на примере.
Возьмём четыре картинки одинакового размера (в моём примере 300px/200px).
HTML разметка будет выглядеть вот так:
<html>
<head>
<meta charset="utf-8">
<title>transform-style</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="wrapper">
<img class="back" src="/images/1.jpg">
<img class="front" src="/images/2.jpg">
<img class="left" src="/images/3.jpg">
<img class="right" src="/images/4.jpg">
</div>
</body>
</html>
В браузере мы увидим, что изображения располагаются друг за другом в одной плоскости.
Теперь, с помощью CSS, разместим изображения в 3D пространстве.
perspective: 5000px;
perspective-origin: 300% 200%;
position: relative;
top: 100px;
margin: auto;
width: 600px;
height: 600px;
transform-style: preserve-3d;
}
img {
position: absolute;
}
.front {
transform: translateZ(170px);
}
.back {
transform: translateZ(-170px) rotateY(-180deg);
}
.left {
transform: translateX(-170px) rotateY(-90deg);
}
.right {
transform: translateX(170px) rotateY(90deg);
}
У нас получится вот так:
Если мы уберём свойство CSS transform-style , то целостность 3D-пространства нарушится:
Вот таким образом работает это замечательное свойство CSS transform-style.