以参考点为中心旋转CSS

Question

如何在CSS（webkit）中以定义的点即定义的和坐标旋转元素？

通常旋转会以元素中心点为参考点。

- thecodeparadox

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

据我所知，目前没有围绕固定点进行旋转的选项（尽管这将非常方便）。

- kufi

---

太棒了，我不知道这已经生效了 :) - Kyle

对于基于 Webkit 的浏览器，您可能需要前缀：-webkit-transform-origin: 0% 0%。 - Murilo

@kufi 那是一个很好的解决方案。链接已经失效，请使用 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin 进行替换。 - monikapatelIT

Answer 2

如果您需要特定的偏移量，其中一种方法是编辑您的图像使其更大，这样中心就位于图像的中心。然后，您可以将其放置在具有“overflow：none”和相对定位的DIV中。 div将遮盖您不希望显示的图像区域。

- Philip Callender

Answer 3

现在是2022年8月，旧答案未提到文档中提到的使用px。

transform-origin接受键盘（left，right，top，bottom或center），百分比（50％，69％...）或长度，描述变换原点距离框左侧边缘的距离。

因此，transform-origin: 360px 540px;非常好，按预期工作。

- Nino