Кратко
Секция статьи "Кратко"Свойство transform
определяет, как будут вести себя потомки элемента в 3D-пространстве при трансформации.
Пример
Секция статьи "Пример"<div class="parent"> <div class="child"></div></div>
<div class="parent"> <div class="child"></div> </div>
.parent { transform-style: preserve-3d;}.child { transform: rotateY(-30deg);}
.parent { transform-style: preserve-3d; } .child { transform: rotateY(-30deg); }
Как это понять
Секция статьи "Как это понять"Допустим, есть родительский элемент, у которого есть потомки. Если задать родительскому элементу свойство transform
со значением preserve
, то это позволит применять к дочерним элементам нормальные 3D-трансформации. При нормальных 3D-трансформациях дочерний элемент сможет, допустим, при повороте пересечь родительский элемент. Если задать значение flat
, то дочерние элементы всегда будут лежать в плоскости родителя и не смогут пересечь его ни при каких поворотах, масштабировании и прочих условиях.
Получается, что при transform
каждый дочерний элемент получает независимую от родителя плоскость, к которой можно применять 3D-трансформации. При transform
существует ровно одна плоскость — плоскость родителя, и никакие трансформации не могут заставить дочерний элемент выйти из этой плоскости.
Как пишется
Секция статьи "Как пишется".parent { transform-style: flat; /* По умолчанию */ transform-style: preserve-3d;}
.parent { transform-style: flat; /* По умолчанию */ transform-style: preserve-3d; }
Подсказки
Секция статьи "Подсказки"💡 Свойство transform
не наследуется. Нужно индивидуально задавать его для каждого следующего уровня вложенности.
На практике
Секция статьи "На практике"🛠 Если нам нужно просто повернуть какой-то элемент в 3D-пространстве, то можно оставить transform
(либо вообще не задавать это свойство). Элемент всё равно будет поворачиваться, к нему будет применяться перспектива, всё будет выглядеть красиво. transform
нужно задавать, когда мы хотим применять 3D-трансформации и к родителю, и к потомкам, и при этом учитывать их визуальное взаимодействие. Классическим примером такой ситуации является куб, собранный из шести элементов-сторон.