offset-rotate

Baseline 2022
Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

offset-rotate は CSS のプロパティで、要素が offset-path に沿って配置された場合の向き/方向を定義します。

試してみましょう

メモ: 初期のころの仕様書では、このプロパティを motion-rotation と呼んでいました。

構文

css
/* パスの方向に従い、任意で角度を追加 */
offset-rotate: auto;
offset-rotate: auto 45deg;

/* パスの方向に従うが、 auto とは逆の方向を向く */
offset-rotate: reverse;

/* パスの位置に関係なく、決められた回転を維持する */
offset-rotate: 90deg;
offset-rotate: 0.5turn;

/* グローバル値 */
offset-rotate: inherit;
offset-rotate: initial;
offset-rotate: revert;
offset-rotate: unset;
auto

要素は正方向の X 軸から見た offset-path 方向の角度で回転します。これが既定値です。

<angle>

要素は指定された回転角によって、時計方向に固定値で回転変換されます。

auto <angle>

auto<angle> が続いた場合、その角度が auto の計算値に加算されます。

reverse

要素は auto と同様に回転しますが、反対方向を向きます。 auto 180deg の値を指定したのと同等です。

公式定義

初期値auto
適用対象座標変換可能要素
継承なし
計算値指定通り
アニメーションの種類<angle>, <basic-shape>, <path()> の何れかとして

形式文法

offset-rotate = 
[ auto | reverse ] ||
<angle>

オフセットパスに沿って要素の方向を設定

HTML

html
<div></div>
<div></div>
<div></div>

CSS

css
div {
  width: 40px;
  height: 40px;
  background: #2bc4a2;
  margin: 20px;
  clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%);
  animation: move 5000ms infinite alternate ease-in-out;

  offset-path: path("M20,20 C20,50 180,-10 180,20");
}
div:nth-child(1) {
  offset-rotate: auto;
}
div:nth-child(2) {
  offset-rotate: auto 90deg;
}
div:nth-child(3) {
  offset-rotate: 30deg;
}

@keyframes move {
  100% {
    offset-distance: 100%;
  }
}

結果

仕様書

Specification
Motion Path Module Level 1
# offset-rotate-property

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset-rotate
auto
reverse

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

関連情報