本文介绍了CSS 相对于参考点的旋转的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着跟版网的小编来一起学习吧！
问题描述
限时送ChatGPT账号..
如何相对于定义的点旋转元素，即定义的 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).
这篇关于CSS 相对于参考点的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！