CSS 相对于参考点的旋转
如何相对于定义的点旋转元素，即定义的 x &y 在 CSS (webkit) 中的坐标?
How to rotate an element with respect to a defined point i.e. defined x & y coordinate in CSS (webkit)?
通常旋转以元素的中心点为参考.
Normally rotation make element's center point as reference.
推荐答案
你可以使用transform-origin.它定义了从元素左上角开始旋转的点.
You could use transform-origin. It defines the point to rotate around from the upper left corner of the element.
transform-origin: 0% 0%
这将围绕左上角旋转.
查看其他选项:https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
为了安全起见，如果此链接不可用，那么这里有几个选项
for the safer side if this link not available then here are a couple of more options
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
据我所知，没有围绕固定点旋转的选项(尽管这很方便).
As far as I know there isn't an option to rotate around a fixed point (although this would be handy).
相关文章