CSS 相对于参考点的旋转

时间:2023-05-14
本文介绍了CSS 相对于参考点的旋转的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

限时送ChatGPT账号..

如何相对于定义的点旋转元素,即定义的 x &yCSS (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 相对于参考点的旋转的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一篇:提高 css3 文本旋转质量 下一篇:jQuery - CSS - 通过拖动鼠标事件旋转 Div

相关文章