Преобразование происхождения - CSS-хитрости

transform-originСвойство используется в сочетании с CSS преобразования, что позволяет изменить точку происхождения преобразования.

.box ( transform: rotate(360deg); transform-origin: top left; )

Как указано выше, transform-originсвойство может принимать до двух ключевых слов или значений длины, разделенных пробелами, для 2D-преобразования и до трех значений для 3D-преобразования.

Использование приведенного выше кода в поле размером 200 на 200 пикселей с преобразованием, примененным к переходу с использованием события щелчка, будет вести себя следующим образом:

Посмотрите на эту ручку!

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

Значения могут быть длины, проценты или ключевые слова top, left, right, bottom, и center.

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

См. Иллюстрацию Pen transform-origin от Шоу (@shshaw) на CodePen.