相对于参考点的CSS旋转

Question

如何相对于定义的点旋转元素,即在CSS(webkit)中定义x和y协调？

通常旋转使元素的中心点作为参考.

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

据我所知,没有选择围绕固定点旋转(虽然这会很方便).