CSS 相对于参考点的旋转
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6633536/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS rotation with respect to a reference point
提问by thecodeparadox
How to rotate an element with respect to a defined point i.e. defined x& ycoordinate in CSS(webkit)?
如何相对于定义的点旋转元素，即在CSS(webkit) 中定义x和y坐标？
Normally rotation make element's center point as reference.
通常旋转以元素的中心点为参考。
回答by kufi
You could use transform-origin. It defines the point to rotate around from the upper left corner of the element.
您可以使用转换原点。它定义了从元素左上角旋转的点。
transform-origin: 0% 0%
This would rotate around the upper left corner.
这将围绕左上角旋转。
For other options look here: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-origin
有关其他选项，请查看此处：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).
据我所知，没有围绕固定点旋转的选项（尽管这很方便）。
回答by Philip Callender
If you need a specific offset, one way is to edit your image to make it larger, such that the centre lies in the middle of your image. You can then place this within a DIV with "overflow: none" and position it with relative positioning. The div will mask off the area of the image you don't wish to display.
如果您需要特定的偏移量，一种方法是编辑您的图像以使其变大，使中心位于图像的中间。然后，您可以使用“溢出：无”将其放置在 DIV 中，并使用相对定位将其定位。div 将屏蔽您不想显示的图像区域。
