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).

这篇关于CSS 相对于参考点的旋转的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持html5模板网！