問題描述
如何相對于定義的點旋轉元素,即定義的 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模板網!