Точка трансформации
Любая трансформация происходит относительно определённой точки, что особенно заметно при вращениях элемента. Исходно точка трансформации находится в центре элемента, что вполне логично, потому что это подходит для большинства случаев. Но иногда возникает необходимость изменить положение точки. Например, у фигурки человека руки должны вращаться относительно плечевого сустава, в противном случае они «оторвутся». Или дверь должна открываться на петлях, которые располагаются на её торце.
Сама точка трансформации указывается с помощью свойства 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. Точки трансформации
Результат данного примера показан на рис. 2.
Рис. 2. Вид элементов в момент трансформации