Точка трансформации

Любая трансформация происходит относительно определённой точки, что особенно заметно при вращениях элемента. Исходно точка трансформации находится в центре элемента, что вполне логично, потому что это подходит для большинства случаев. Но иногда возникает необходимость изменить положение точки. Например, у фигурки человека руки должны вращаться относительно плечевого сустава, в противном случае они «оторвутся». Или дверь должна открываться на петлях, которые располагаются на её торце.

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

Точки трансформации

Рис. 1. Точки трансформации

Соответствие между процентной записью и ключевыми словами приведено ниже.

0, 0 = left top — левый верхний угол;
50% 0 = center top — верхняя точка по центру;
100% 0 = right top — правый верхний угол;
0, 50% = left, center — центральная точка по левому краю;
50% 50% = center center — по центру элемента, это значение по умолчанию;
100% 50% = right center — центральная точка по правому краю;
0, 100% = left bottom — левый нижний угол;
50% 100% = center bottom — нижняя точка по центру;
100% 100% = right bottom — правый нижний угол.

В примере 1 показан эффект распашных дверей при наведении курсора на фигуру. Вращение происходит по оси Y, а чтобы оно было более выразительно добавим ещё и перспективу. Для левого элемента поворот происходит относительно центральной точки левого края, а для правого — относительно центральной точки правого края. Для поворота нет разницы, где располагается точка трансформации по оси Y, а вот на вид перспективы это влияет, поэтому располагаем её по центру правого и левого края.

Пример 1. Точки трансформации

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Трансформация</title> <style> .doors { display: inline-block; } .door { width: 200px; height: 360px; display: inline-block; background: #e79e6d; border: 2px solid #333; transition: transform 2s; } .door-left { transform-origin: 0 50%; /* Точка трансформации слева */ } .door-right { transform-origin: 100% 50%; /* Точка трансформации справа */ } .doors:hover .door-left { /* Добавляем перспективу и поворот */ transform: perspective(400px) rotateY(40deg); } .doors:hover .door-right { transform: perspective(400px) rotateY(-40deg); } </style> </head> <body> <div class="doors"> <div class="door door-left"></div> <div class="door door-right"></div> </div> </body> </html>

Результат данного примера показан на рис. 2.

Вид элементов в момент трансформации