CSS - offset-path

• トップ
• CSSリファレンス
• offset-path

概要

説明

モーションパス のパスを指定します。

none

モーションパスを指定しません。

ray(...)

ray(...) を参照してください。

<url>

<path> や <polygon> などでシェイプを定義したSVGファイルを指定します。

<basic-shape>

circle() や path() などの描画関数を指定します。詳細は clip-path を参照してください。

<coord-box>

描画領域を指定します。詳細は mask-origin を参照してください。

使用例

使用例は CSSモーションパス を参照してください。

ray(...)

ray(<angle> && <ray-size>? && contain? && [at <position>]? )
<ray-size> = closest-side | closest-corner | farthest-side | farthest-corner | sides

<position> を起点として <angle> の方向(上方向を0度として時計まわり)に向かう、長さ <ray-size> の放射線をパスとします。contain を指定するとオブジェクトが領域からはみ出さない範囲で移動します。

closest-side

最も近い枠線との距離。

closest-corner

最も近いコーナーとの距離。

farthest-side

最も遠い枠線との距離。

farthest-corner

最も遠いコーナーとの距離。

sides

最初に枠線と交わるまでの距離。

使用例は モーションパス: ray() を参照してください。

関連項目

• モーションパス
• offset
• offset-distance
• offset-position
• offset-anchor
• offset-rotate

リンク

• https://drafts.fxtf.org/motion/#offset-path-property
• https://developer.mozilla.org/ja/docs/Web/CSS/offset-path
• https://caniuse.com/?search=offset-path