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

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

Сама точка трансформации указывается с помощью свойства transfom-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 lang="en">
 <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.

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