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

Ответ 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

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

Ответ 2

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

Ответ 3

Это нелегко, но мне кажется, что эффект может быть реализован с помощью функции css3: translate/skew. Вот пример, официальная сеть mapwize предоставляет функцию редактора img на слое карты. В последнее время я также пытаюсь реализовать это, но пока не решено, надеюсь, кто-то, кто знает, может дать мне несколько советов. введите описание изображения здесь