CSS TRANSFORM LAB

Transform Origin Playground

同じtransformでも、基準点が変わると動きの意味が変わります。

CSS transform対応
02

LIVE COMPARISON

同じ動き、違う基準点

SAME TRANSFORM
FIXED

Center

50% 50%
CENTER
BACK

要素の中央を基準に変形します。

CUSTOM

Left Center

0% 50%
CUSTOM
BACK

点をドラッグして、動きの意味を変えられます。

ORIGIN X0%横の基準点
ORIGIN Y50%縦の基準点
MOTION78°rotate
DURATION1100milliseconds
03

CSS OUTPUT

基準点と動きをコピー

基準点は要素の外側にも置けるため、大きな軌道の回転も作れます。