offset-rotate

Avatar of Chris Coyier
Chris Coyier

DigitalOcean 为您的旅程各个阶段提供云产品。从 $200 的免费积分 开始!

此属性最初被称为 motion-rotation,后来变为 offset-rotation,现在是 offset-rotate。它仍然是一个工作草案实验属性,所以 🤷‍♀️。如果您要使用它,您最好使用最新版本。

CSS 中的 offset-rotate 属性根据元素在 offset-distance 上的 offset-path 沿线的距离来控制元素的角度。

想象一下,沿着路径动画的元素是一辆小赛车。当赛车沿着路径移动时,它需要旋转,使车头朝向移动方向,否则会看起来很奇怪,不自然。值得庆幸的是,offset-path 的默认值为 auto,它正好能做到这一点。

查看此演示

查看 CodePen 上的
scalextric car on motion-path
,作者是 Chris Coyier (@chriscoyier)
CodePen 上。

可能的取值

.mover {
  offset-rotate: auto; /* default, faces forward */
  offset-rotate: reverse; /* faces backward */
  offset-rotate: 30deg; /* fixed angle */
  offset-rotate: auto 30deg; /* combine auto behavior with a set rotation */
}

浏览器支持

在撰写本文时,offset-* 属性仍然被视为一项实验性功能。如果当前的浏览器支持不足让您犹豫是否要在项目中使用它,那么您可能需要考虑使用 GSAP 来实现此级别的动画。目前,它将为您提供最广泛的浏览器支持。

这些浏览器支持数据来自 Caniuse,该网站提供了更多详细信息。数字表示浏览器在该版本及更高版本上支持该功能。

台式机

ChromeFirefoxIEEdgeSafari
46727916.0

移动设备/平板电脑

Android ChromeAndroid FirefoxAndroidiOS Safari
12712712716.0

从 Chrome 46 和 Opera 33(以及相关的移动版本)开始,Blink 中有了“初始支持”(无标记)。

相关属性

其他信息