Функции 3D-трансформаций
Как веб-дизайнер, вы, вероятно, хорошо знакомы с работой в двух измерениях — X и Y, размещая элементы по горизонтали и вертикали. Теперь, когда 3D-пространство инициализировано с помощью perspective, мы можем трансформировать элементы в трёх пространственных измерениях, добавив третье измерение — Z.
3D-преобразования используют тот же свойство transform, что и для 2D-преобразований. Если вы знакомы с 2D-преобразованиями, основные функции 3D-преобразований покажутся вам похожими.
rotateX( angle )rotateY( angle )rotateZ( angle )translateZ( tz )scaleZ( sz )
Тогда как translateX() перемещает элемент вдоль горизонтальной оси X, translateZ() перемещает его вдоль оси Z, которая проходит от нас к экрану в 3D-пространстве. Положительные значения сдвигают элемент ближе к зрителю, отрицательные — дальше.
Функции rotate вращают элемент вокруг соответствующей оси. Это может быть немного контр-интуитивно на первый взгляд, так как можно подумать, что rotateX() будет вращать объект горизонтально, влево или вправо. Но на самом деле, используя rotateX(), элемент вращается вокруг горизонтальной оси X, так что верхняя часть элемента наклоняется назад и уходит, а нижняя — наклоняется к нам.
Существует несколько сокращённых функций преобразования, с помощью которых можно задать значения для всех трёх измерений:
translate3d( tx, ty, tz )scale3d( sx, sy, sz )rotate3d( rx, ry, rz, angle )
Аппаратное ускорение
Эти функции transform3d() с тремя аргументами также имеют преимущество в виде активации аппаратного ускорения. Дин Джексон, автор спецификации CSS 3D преобразований и главный чувак WebKit, написал:
По сути, любое преобразование, в котором есть 3D-операция, активирует аппаратное композитирование, даже если само преобразование 2D или вообще ничего не делает (например,
translate3d(0,0,0)). Обратите внимание, что это текущее поведение, и оно может измениться в будущем (именно поэтому мы не документируем и не рекомендуем его). Однако это очень полезно в некоторых ситуациях и может значительно улучшить производительность при перерисовке.
Эта заметка была написана в 2010 году. С тех пор другие браузеры приняли это поведение, но результаты могут различаться. Аппаратное ускорение в браузерах остаётся загадочной темой, о которой редко пишут в документации.
Для ясности, в демонстрациях в этом материале будут использованы базовые функции преобразования, но если вы хотите повысить производительность, попробуйте использовать transform3d().