skip to main content

transform-style

css

Кратко 🔗

Свойство transform-style определяет, как будут вести себя потомки элемента в 3D-пространстве при трансформации.

Пример 🔗

<div class="parent">
<div class="child"></div>
</div>
.parent {
transform-style: preserve-3d;
}

.child {
transform: rotateY(-30deg);
}

Как это понять 🔗

Допустим, есть родительский элемент, у которого есть потомки. Если задать родительскому элементу свойство transform-style со значением preserve-3d, то это позволит применять к дочерним элементам нормальные 3D-трансформации. При нормальных 3D-трансформациях дочерний элемент сможет, допустим, при повороте пересечь родительский элемент. Если задать значение flat, то дочерние элементы всегда будут лежать в плоскости родителя и не смогут пересечь его ни при каких поворотах, масштабировании и прочих условиях.

Получается, что при transform-style: preserve-3d каждый дочерний элемент получает независимую от родителя плоскость, к которой можно применять 3D-трансформации. При transform-style: flat существует ровно одна плоскость — плоскость родителя, и никакие трансформации не могут заставить дочерний элемент выйти из этой плоскости.

See the Pen transform-style by Denis Ezhkov (@ezhkov) on CodePen.

Как пишется 🔗

.parent {
transform-style: flat; /* По умолчанию */
transform-style: preserve-3d;
}

Глобальные значения:

.parent {
transform-style: inherit;
transform-style: initial;
transform-style: unset;
}

Подсказки 🔗

💡 Свойство transform-style не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.

В работе 🔗

🛠 Если нам нужно просто повернуть какой-то элемент в 3D-пространстве, то можно оставить transform-style: flat (либо вообще не задавать это свойство). Элемент всё равно будет поворачиваться, к нему будет применяться перспектива, всё будет выглядеть красиво. transform-style: preserve-3d нужно задавать, когда мы хотим применять 3D-трансформации и к родителю, и к потомкам, и при этом учитывать их визуальное взаимодействие. Классическим примером такой ситуации является куб, собранный из шести элементов-сторон.

See the Pen transform-style2 by Denis Ezhkov (@ezhkov) on CodePen.

Автор: Денис,