transform-origin

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您旅程的每个阶段提供云产品。 立即开始使用 $200 免费积分!

transform-origin 属性与 CSS 变换一起使用,允许您更改变换的原点。

.element {
  transform: rotate(360deg);
  transform-origin: top left;
}

如上所述,transform-origin 属性最多可以采用两个以空格分隔的关键字或长度值用于 2D 变换,最多可以采用三个值用于 3D 变换。

在 200px x 200px 的方框上使用上面的代码,将变换应用于使用点击事件过渡的代码,将表现如下

默认情况下,变换的原点为“50% 50%”,即任何给定元素的中心。 将原点更改为“左上角”(如上面的演示中)会导致元素使用元素的左上角作为旋转点。

值可以是长度、百分比或关键字 topleftrightbottomcenter

第一个值是水平位置,第二个值是垂直位置,第三个值表示 Z 轴上的位置。 第三个值仅在您使用 3D 变换时才有效,并且不能是百分比。

浏览器支持

IEEdgeFirefoxChromeSafariOpera
9+全部3.5+全部全部11.5+
Android ChromeAndroid FirefoxAndroid 浏览器iOS SafariOpera Mobile
全部全部91+全部全部
来源:caniuse