CSS :: Трансформация

• Трансформация элемента и свойство transform
• Функция трансформации translate()
• Функция трансформации scale()
• Функция трансформации rotate()
• Функция трансформации skew()
• Функция трансформации matrix()
• Функция perspective()
• css-свойство perspective
• css-свойство perspective-origin
• css-свойство transform-origin
• css-свойство transform-style
• css-свойство backface-visibility
• Пару слов о 3D-функциях трансформации

Трансформация элементов в CSS представляет собой возможность сдвигать, поворачивать, масштабировать, а также наклонять (деформация сдвига) элементы. При этом существует два вида css-трансформаций: 2D-трансформации на плоскости и 3D-трансформации в пространстве. Осуществляются такие трансформации при помощи анимируемого ненаследуемого css-свойства transform, которое в качестве значений принимает ряд специальных функций, как раз и позволяющих трансформировать элементы должным образом. Перечислим эти функции:

• translate() – сдвигает элемент на плоскости вдоль осей X и Y;
• translateX() – сдвигает элемент вдоль оси X;
• translateY() – сдвигает элемент вдоль оси Y;
• translateZ() – сдвигает элемент вдоль оси Z;
• translate3d() – сдвигает элемент в трехмерном пространстве;
• scale() – масштабирует элемент на плоскости;
• scaleX() – масштабирует элемент вдоль оси X;
• scaleY() – масштабирует элемент вдоль оси Y;
• scaleZ() – масштабирует элемент вдоль оси Z;
• scale3d() – масштабирует элемент в трехмерном пространстве;
• rotate() – поворачивает элемент на требуемый угол на плоскости относительно точки трансформации, которая задается свойством transform-origin;
• rotateX() – поворачивает элемент на требуемый угол относительно оси X;
• rotateY() – поворачивает элемент на требуемый угол относительно оси Y;
• rotateZ() – поворачивает элемент на требуемый угол относительно оси Z;
• rotate3d() – поворачивает элемент в трехмерном пространстве;
• skew() – наклоняет элемент на заданный угол на плоскости;
• skewX() – наклоняет элемент вдоль оси X;
• skewY() – наклоняет элемент вдоль оси Y;
• matrix() – задает двумерную матрицу преобразований, объединяя несколько функций в одной;
• matrix3d() – задает трехмерную матрицу преобразований;
• perspective() – задает перспективу (глубину сцены);
• none – отменяет эффекты трансформации для данного элемента.

Если необходимо применить к элементу сразу несколько трансформаций, то свойству transform разрешается передавать требуемое количество функций, перечисляя их через пробел (см. примеры ниже). При этом важно помнить, что порядок перечисления функций имеет значение, т.к. трансформации будут выполняться последовательно.

Также следует иметь в виду, что в результате трансформации элемент остается в общем потоке документа и его место не занимается другими элементами из потока. Поэтому нужно быть внимательными при использовании трансформации элементов и следить за тем, чтобы они не заползали на соседние элементы страницы.

Функция трансформации translate() позволяет сдвигать элемент на плоскости вдоль осей X и Y. В качестве параметров функция может принимать два значения в виде любых допустимых в CSS единиц измерения длины, как положительных, так и отрицательных. Первое значение смещает элемент в горизонтальном направлении вдоль оси X (если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево), а второе предназначено для смещения в вертикальном положении вдоль оси Y (если значение больше нуля, то элемент сдвигается вниз, а если отрицательное, то вверх). Второе значение разрешается не указывать, тогда трансформируемый элемент будет сдвигаться только в горизонтальном направлении вдоль оси X (см. пример №1).

Пример №1. Функция трансформации translate()

Функция трансформации scale() дает возможность масштабирования элемента на плоскости, принимая в качестве параметров два числа, первое из которых масштабирует элемент в горизонтальном направлении, а второе - по вертикали. Значение параметра большее единицы (например, 1.7), приводит к увеличению масштаба элемента, меньшее единицы (например, 0.8) - к уменьшению масштаба. Если же значение еще и меньше нуля, то элемент не только масштабируется, но также и зеркально отражается относительно соответствующей оси (см. пример №2). Отметим, что значение параметра равное единице не изменяет масштаб элемента.

Что касается сохранения пропорций при масштабировании, то значения задают масштаб элемента независимо друг от друга. Поэтому, если нужно избежать нарушения пропорций сторон элемента, следует передавать функции только одно значение. Тогда элемент будет масштабироваться с сохранением пропорций одновременно и по горизонтали, и по вертикали.

Пример №2. Функция трансформации scale()

Функция трансформации rotate() позволяет поворачивать элемент на плоскости вокруг точки трансформации на требуемый угол (см. пример №3). Точка трансформации по умолчанию располагается в центре элемента и может быть изменена при помощи свойства transform-origin (см. ниже). В качестве значений функция rotate() принимает все доступные в CSS единицы измерения углов: градусы (например, rotate(30deg)), грады (например, rotate(100grad)), радианы (например, rotate(-3.15rad)) или же просто обороты (например, rotate(2.5turn)). При этом положительные значения угла приводят к повороту элемента по часовой стрелке, отрицательные - против.

Пример №3. Функция трансформации rotate()

Функция трансформации skew() используется для наклона (деформации сдвига) элемента на плоскости вдоль осей X и Y, принимая в качестве параметров значения углов: первое значение задает угол наклона элемента в горизонтальном направлении (если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо), второе значение задает угол наклона элемента по вертикали (если значение больше нуля, то элемент наклоняется вниз, а если отрицательное, то вверх). Опять же, разрешается использовать любые доступные в CSS единицы измерения углов: градусы, грады, радианы или же просто обороты (например, skew(2.5turn, -30deg)). При этом вместо нулевых значений допустимо использовать просто нуль, а второе значение можно не указывать вообще, тогда трансформируемый элемент будет наклоняться только в горизонтальном направлении вдоль оси X (см. пример №4).

Пример №4. Функция трансформации skew()

Функция трансформации matrix() позволяет трансформировать элементы, совмещая в себе возможности сразу нескольких функций трансформации (см. пример №5). В качестве параметров она принимает через запятую шесть значений:

• scaleX – изменяет масштаб элемента по горизонтали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси X, больше 1 - увеличивает (расширяет) его;
• skewY – наклоняет элемент по вертикали (сдвиг вертикальных сторон элемента друг относительно друга вдоль оси Y): если значение больше нуля, то элемент наклоняется вверх, а если отрицательное, то вниз;
• skewX – наклоняет элемент по горизонтали (сдвиг горизонтальных сторон элемента друг относительно друга вдоль оси X): если значение больше нуля, то элемент наклоняется влево, а если отрицательное, то вправо;
• scaleY – изменяет масштаб элемента по вертикали: значение от 0 до 1 уменьшает (сжимает) элемент вдоль оси Y, больше 1 - увеличивает (расширяет) его;
• translateX – смещает элемент на указанное число пикселей по горизонтали: если значение больше нуля, то элемент сдвигается вправо, а если отрицательное, то влево;
• translateY – смещает элемент на указанное число пикселей по вертикали: если значение больше нуля, то элемент сдвигается вниз (опускается), а если отрицательное, то вверх (поднимается).

Пример №5. Функция трансформации matrix()

Рассмотренные выше примеры функций позволяют трансформировать элементы на плоскости. Однако в CSS имеются возможности осуществлять и 3D-трансформации, добавляя третье измерение к веб-страницам.

Одной из таких возможностей является функция perspective(), которая задает глубину просмотра (3d-перспективу), т.е. расстояние по оси Z от плоскости экрана до точки сходимости линий. В результате создается впечатление приближения либо отдаления элемента от зрителя (см. рис №6).

Рис. №6. Зависимость масштабирования вдоль оси Z от 3d-перспективы

Масштабирование элемента пропорционально d/(d–z), где d (значение перспективы) - это расстояние от плоскости экрана до предполагаемого положения глаз зрителя, а Z - координата желаемого расположения плоскости элемента на оси Z, направленной к пользователю. Так на верхнем рисунке, чтобы создать для пользователя впечатление, что исходный круг (изображен сплошным контуром) на экране стал ближе к нему в два раза (круг изображен пунктиром), его размер также необходимо увеличить в два раза (голубой круг), т.к. d/(d–d/2)=2 (здесь z=d/2). На нижнем рисунке изображена ситуация, когда у пользователя создается впечатление, что исходный круг на экране удалился от него на половину расстояния от пользователя до экрана. Для этого потребовалось уменьшить размер исходного круга на треть, т.к. d/(d–(-d/2))=d/(d+d/2)=2/3 (здесь z=-d/2).

В качестве параметра функция perspective() принимает любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели). При этом чем больше будет положительное значение, тем менее будет выражен эффект перспективы (элемент будет все больше удаляться от зрителя), и наоборот, при уменьшении положительного значения эффект перспективы становится более выраженным (элемент будет все больше приближаться к зрителю). Что касается отрицательных значений и нуля, то они отменяют действие перспективы (см. пример №7). Однако следует иметь в виду, что если перспективу не задавать, то будут отсутствовать и эффекты трансформации в трехмерном пространстве, например, повороты элемента вокруг осей X и Y или его перемещение вдоль оси Z.

Пример №7. Функция трансформации perspective()

Обязательно поэкспериментируйте с данным примером: попробуйте повороты вокруг оси Y, поизменяйте угол поворота, затем замените функцию трансформации на translateZ и также поизменяйте ее значения.

Когда 3D-перспектива задается с помощью функции perspective(), 3D-пространство активируется только для одного элемента. Если же требуется обеспечить одинаковую перспективу для всех дочерних элементов родителя, то можно использовать специальное ненаследуемое css-свойство perspective, которое активирует 3D-пространство внутри элемента-родителя и будет применено ко всем дочерним элементам сразу. В результате такой манипуляции отпадает необходимость использовать функцию для каждого дочернего элемента. При этом в случае необходимости для конкретных элементов всегда можно будет использовать функцию perspective(), переопределив значение свойства (см. пример №8).

Что касается значений, то свойство perspective может принимать:

• длина – любые доступные в CSS единицы измерения длины (если не указаны, то по умолчанию будут использованы пиксели), при этом чем больше положительное значение, тем менее выражен эффект перспективы, и наоборот; отрицательные значения и нуль отменяют действие перспективы;
• none – отменяет действие перспективы (используется по умолчанию).

Пример №8. Использование css-свойства perspective

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

По умолчанию точка сходимости линий (т.е. точка расположения глаз зрителя при взгляде на экран) при использовании свойства perspective находится на оси, проходящей через центр элемента перпендикулярно плоскости экрана (см. рисунок №9). Однако эту точку можно смещать, изменяя ее координаты X и Y. Делается это при помощи ненаследуемого css-свойства perspective-origin, которое должно использоваться совместно с perspective для родительского блока и свойством transform для дочернего элемента.

Рис. №9. Пример смещения точки сходимости линий при использовании перспективы

В качестве значений perspective-origin принимает через пробел координаты X и Y точки сходимости линий (см. пример №10). Для них разрешается использовать:

• для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X);
• для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y).

Отметим, что за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его ширины. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству perspective-origin только одно значение, то оно будет считаться координатой X, а для координаты Y будет использовано значение по умолчанию.

Пример №10. Пример использования css-свойства perspective-origin

Обязательно поэкспериментируйте с данным примером, попробовав различные варианты смещения точки сходимости линий (точки обзора) как по вертикали, так и по горизонтали. Используйте различные единицы измерения, а также ключевые слова.

С расположением точки сходимости линий и возможностью ее смещения в плоскости, которая проходит параллельно экрану через эту точку, мы разобрались. Однако на результат трансформации влияет также и расположение еще одной важной точки, называемой центром (точкой) трансформации. По умолчанию трансформация элемента происходит относительно точки трансформации, которая находится в плоскости экрана в центре трансформируемого элемента (см. рис №11). Однако эту точку можно смещать, изменяя ее координаты X, Y и Z (координаты отсчитываются от левого верхнего угла элемента). Делается это при помощи ненаследуемого css-свойства transform-origin, которое используется совместно с transform.

Рис. №11. Расположение центра трансформации по умолчанию

В качестве значений transform-origin принимает через пробел координаты X, Y и Z центра трансформации (см. пример №12). Для них разрешается использовать:

• для координаты X – любые доступные в CSS единицы измерения длины, проценты (по умолчанию X=50%), а также ключевые слова left (эквивалентно 0% по оси X), center (эквивалентно 50% по оси X) или right (эквивалентно 100% по оси X);
• для координаты Y – любые доступные в CSS единицы измерения длины, проценты (по умолчанию Y=50%), а также ключевые слова top (эквивалентно 0% по оси Y), center (эквивалентно 50% по оси Y) или bottom (эквивалентно 100% по оси Y).
• для координаты Z – любые доступные в CSS единицы измерения длины, исключая проценты и ключевые слова.

Опять же, за начало координат при расчетах принимается левый верхний угол элемента, а проценты рассчитываются относительно его размеров. При этом разрешается использовать не только положительные, но и отрицательные значения координат. Кроме того, если передать свойству transform-origin только одно значение, то оно будет считаться координатой X, если два, то X и Y (соответственно неуказанные координаты примут значения по умолчанию).

Пример №12. Пример использования css-свойства transform-origin

Обязательно поэкспериментируйте с данным примером, попробовав различные варианты координат центра трансформации. Используйте различные единицы измерения, а также ключевые слова. Не забывайте, что для координаты Z нельзя использовать проценты и ключевые слова.

Когда мы трансформируем родительский элемент в трехмерном пространстве, то все дочерние элементы по умолчанию отрисовываются в двумерном пространстве своего родителя, т.е. располагаются в его плоскости и могут без проблем подвергаться 2D-трансформациям. Но если мы попробуем применить к дочерним элементам 3D-трансформации, то результат нас не очень обрадует, т.к. точки трехмерного пространства все равно будут спроецированы на плоскость родительского элемента и мы получим совсем не то, что ожидали (см. пример №13). Для решения этой проблемы и возможности активации для дочерних трансформируемых элементов собственного 3D-пространства в CSS предусмотрено ненаследуемое свойство transform-style, которое применяется к родительскому контейнеру и определяет, как дочерние трансформированные элементы (т.е. элементы, для которых будет задано свойство transform) будут отображаться в 3D-пространстве:

• flat – будут трансформироваться в плоскости родителя (используется по умолчанию);
• preserve-3d – будут трансформироваться в своем собственном 3D-пространстве.

Пример №13. Пример использования css-свойства transform-style

Итак, в примере выше у нас имеется обычный общий «div» (темно-серый фон), в котором расположены два других «div», которые подвергаются идентичной трансформации поворота вокруг оси X (запустите пример в браузере и визуально убедитесь в этом). Оба этих блока имеют еще и по одному дочернему абзацу, которые мы также пытаемся подвергнуть дополнительной 3D-трансформации поворота вокруг оси X (она лежит в плоскости родительского для текущего абзаца элемента). Однако, если в нижнем блоке мы видим, что абзац дополнительно повернулся (как мы и ожидали), то в верхнем блоке мы поворота не увидели. Вместо этого мы увидели какую-то 2D-трансформацию, получившуюся в результате проецирования точек третьего измерения на плоскость родительского элемента. Это связано с тем, что в нижнем блоке мы активировали для абзаца собственное 3D-пространство при помощи класса three_d.

Обязательно поэкспериментируйте с данным примером, попробовав, например, применить к абзацам трансформацию поворота вокруг оси Z (разницы видно не будет, т.к. такая трансформация будет происходить в плоскости родительского элемента).

Когда в результате трансформации элемента (например, поворота вокруг оси X) он поворачивается к нам обратной стороной, его обратная сторона по умолчанию остается видимой пользователю и отображается зеркально (см. пример №14). Однако такое поведение можно легко изменить при помощи ненаследуемого css-свойства backface-visibility, которое определяет, будет показываться обратная сторона элемента или нет. В качестве значений свойство принимает два ключевых слова:

• visible – обратная сторона элемента видна и отображается зеркально сквозь переднюю сторону элемента (используется по умолчанию);
• hidden – обратная сторона элемента не видна (скрывается за передней поверхностью элемента).

Пример №14. Пример использования css-свойства backface-visibility

В примере выше второй элемент не отображается, т.к. он больше не просвечивается. Это может быть полезно, когда нужно создать для пользователя впечатление того, что у элемента имеется более одной стороны. Например, чтобы создать игральную карту, можно взять два одинаковых по размеру фоновых изображения, применить к ним соответствующую трансформацию поворота и установить для backface-visibility значение visible. При повороте на угол более, чем девяноста градусов, одно изображение станет невидимым, а второе наоборот. Этот и другие примеры использования трансформаций в анимации можно посмотреть на соответствующей странице нашего учебного сайта №1.

В конце хотелось бы сказать пару слов о перечисленных вначале страницы 3D-функциях translate3d(), scale3d(), rotate3d() и matrix3d(). Их использование предусматривает некоторое знание математики и матриц, что подходит далеко не каждому верстальщику. Поэтому в большинстве случаев о них можно смело забыть и в случаях, когда требуется трансформация элемента вдоль оси Z, пользоваться более простыми функциями translateZ(), scaleZ() и rotateZ(). Тоже самое касается трехмерных трансформаций и вдоль других осей.

Далее, следует обратить внимание на то, что в списке отсутствуют функции skewZ() и skew3d(). Это связано с тем, что skew - единственная трансформация, которую допускается осуществлять только на плоскости (деформация сдвига вдоль оси Z не разрешается).

Несмотря на то, что CSS позволяет нам преобразовывать двумерные html-элементы в трехмерном пространстве добавляя чувство глубины в сцену, сами элементы все равно остаются плоскими. Поэтому сделать из квадрата куб никак не получится, для этого потребуется целых шесть отдельных элементов по одному для каждой стороны. Тем не менее, если говорить о создании красивых 3D-эффектов на страницах сайтов, то возможностей CSS для этого вполне достаточно.

• Позиционирование элементов
• Трансформация в CSS
• Плавающие элементы
• Вернуться к оглавлению учебника