вращение CSS относительно опорной точки

Question

Как повернуть элемент относительно определенной точки, то есть определенной x & y координаты в CSS (webkit)?

Обычно вращение делает центральную точку элемента ссылкой.

Answer 1

Вы можете использовать transform-origin.Он определяет точку вращения вокруг верхнего левого угла элемента.

transform-origin: 0% 0%

Это будет вращаться вокруг верхнего левого угла.

Другие варианты смотрите здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin

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

transform-origin: center; // one of the keywords left, center, right, top, and bottom

transform-origin: top left; // same way can use two keywords

transform-origin: 50px 50px; // specific x-offset | y-offset

transform-origin: bottom right 60px; // third part is for 3D transform : z-offset

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

Answer 2

Если вам нужно конкретное смещение, один из способов - отредактировать изображение, чтобы оно стало больше, чтобы центр находился посередине изображения. Затем вы можете поместить это в DIV с помощью «overflow: none» и расположить его с относительным позиционированием. Div замаскирует область изображения, которую вы не хотите отображать.