CSS 相对于参考点的旋转

Question

如何相对于定义的点旋转元素，即定义的 x & y CSS （webkit）中的坐标？

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

原文由 thecodeparadox 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用转换原点。它定义了从元素左上角开始旋转的点。

 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 发布，翻译遵循 CC BY-SA 4.0 许可协议