offset-rotate

これは実験的な機能です。本番で使用する前にブラウザー実装状況をチェックしてください。

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

構文

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

Syntax

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

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

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

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

<angle>

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

auto <angle>

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

reverse

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

形式文法

[ auto | reverse ] || <angle>

HTML

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

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%;
  }
}

結果

仕様書

仕様書 状態 備考
Motion Path Module Level 1
offset-rotate の定義
草案 初回定義
初期値auto
適用対象変形可能要素
継承なし
メディア視覚
計算値指定値
アニメーションの種類as <angle>, <basic-shape> or <path()>
正規順序構文通り

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
offset-rotate
実験的
Chrome 完全対応 56
完全対応 56
完全対応 55
代替名
代替名 非標準の名前 offset-rotation を使用しています。
完全対応 46
代替名
代替名 非標準の名前 motion-rotation を使用しています。
Edge 未対応 なしFirefox 完全対応 69
無効
完全対応 69
無効
無効 From version 69: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE 未対応 なしOpera 完全対応 43
完全対応 43
完全対応 42
代替名
代替名 非標準の名前 offset-rotation を使用しています。
完全対応 33
代替名
代替名 非標準の名前 motion-rotation を使用しています。
Safari 未対応 なしWebView Android 完全対応 56
完全対応 56
完全対応 55
代替名
代替名 非標準の名前 offset-rotation を使用しています。
完全対応 46
代替名
代替名 非標準の名前 motion-rotation を使用しています。
Chrome Android 完全対応 56
完全対応 56
完全対応 55
代替名
代替名 非標準の名前 offset-rotation を使用しています。
完全対応 46
代替名
代替名 非標準の名前 motion-rotation を使用しています。
Firefox Android 未対応 なしOpera Android ? Safari iOS 未対応 なしSamsung Internet Android 完全対応 6.0

凡例

完全対応  
完全対応
未対応  
未対応
実装状況不明  
実装状況不明
実験的。動作が変更される可能性があります。
実験的。動作が変更される可能性があります。
ユーザーが明示的にこの機能を有効にしなければなりません。
ユーザーが明示的にこの機能を有効にしなければなりません。
非標準の名前を使用しています。
非標準の名前を使用しています。