構文
[ auto | reverse ] || <angle>プレビュー
プリセット
右下の角をドラッグするとサイズを変えられます
コード
.box > :nth-child(2) {
offset-path: path("M 20 80 C 80 0 160 160 220 80");
offset-distance: 30%;
offset-rotate: 0deg;
}コントロール
offset-rotate0deg
向きの決め方
角度
解説
値の書き方
auto：初期値です。その位置での道筋の進む向きに合わせて回し、要素の右向き（横書きの文字が進む向き）を道筋の進む向きにそろえます。reverse：auto 180degと同じで、道筋と逆の向きを向きます。- 角度：道筋の向きに関係なく、その角度だけ回したままにします。
0degなら回しません。
auto や reverse と角度を一緒に書くと、道筋の向きにその角度を足します。auto 90deg なら、道筋の進む向きから時計回りに 90 度回します。
プレビューでは、項目に offset-path で波の形の道筋を、offset-distance で 30% の位置を書いています。auto にすると、右向きの矢印が道筋に沿って右下へ傾きます。
よく使う場面
道筋に沿って動かす乗り物の絵などを進む向きに向けたいときは auto、文字のように傾けたくないものを動かすときは 0deg にします。
気をつけること
- offset-path が
noneのときは何も起きません。 - 初期値が
autoなので、offset-path を書くだけで要素が回ります。回したくないときは0degを書きます。 - Chrome・Edge 56、Firefox 72、Safari 16 から使えます。