Веб-мастерская Ларисы ВоронинойCвойство CSS transform-style для создания 3D трансформаций
WEB-мастерская Ларисы Ворониной logo

Cвойство CSS transform-style для создания 3D трансформаций Июл 20 2017

Свойство CSS transform-style  определяет расположение  дочерних элементов в 3D пространстве.

У этого свойства всего два значения:

flat - дочерние элементы будут находиться в той же плоскости, что и их родитель.

preserve-3d -   дочерние элементы будут позиционировать в 3D-пространстве.

Свойство transform-style  целесообразно использовать совместно со свойствами transform, perspective и perspective-origin.

Рассмотрим  transform-style на примере.

Возьмём четыре картинки одинакового размера (в моём примере 300px/200px).

HTML разметка будет выглядеть вот так:

<!DOCTYPE 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 пространстве.

.wrapper {
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.

Обратите внимания, что для прозрачности кода в этой статье я убрала кросс-браузерность.


Рейтинг@Mail.ru