相对于参考点的CSS旋转

Question

如何相对于定义的点旋转元素，即定义x＆amp; 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

如果您需要特定的偏移，一种方法是编辑图像以使其更大，使得中心位于图像的中间。然后，您可以使用“overflow：none”将其置于DIV中，并将其置于相对位置。 div将屏蔽您不希望显示的图像区域。