CSS Transform ビジュアライザー
スライダーを動かして transform の変化をリアルタイム確認。transform-origin で基準点も調整できます。
translateX
translateY
rotate
scale
skewX
skewY
transform-origin
center center
Box
CSS
.box {
transform: none;
transform-origin: center center;
transition: transform 0.3s ease;
}使い方
- 左のスライダーで translateX/Y・rotate・scale・skewX/Y を調整しよう
- 右のプレビューで変形がリアルタイムに確認できます（破線が元の位置）
- transform-origin の 3×3 グリッドで変形の基準点を切り替えよう
- 「滑らかに変化」 をONにすると transition アニメーション付きで動きます
- 下の CSS コードをコピーして自分のスタイルシートに貼り付けよう！
transform の4つの関数を整理する
- translate(x, y) — 要素を移動。ホバーで少し上に浮かせる演出や、中央寄せの微調整に。
- rotate(deg) — 回転。アイコンの回転アニメーションや、カードを少し傾ける装飾に。
- scale(x, y) — 拡大縮小。ホバーで1.05倍にすると「押せそう」な印象を与える。
- skew(x, y) — 傾斜。平行四辺形を作ったり、テキストに動きをつけたり。
transform-origin が重要な理由
同じ rotate(45deg) でも、基準点が「中央」か「左上」かで結果が全く違う。
ドアが蝶番を軸に回転するように、transform-origin は「どこを固定して変形するか」を決める。
このツールの3×3グリッドで基準点を切り替えて、違いを体感しよう。
よくある質問
- Q. transform と position の違いは？
- position は要素のレイアウト上の配置を変える（他の要素に影響する場合がある）。transform は見た目だけ変える（レイアウトに影響しない）。アニメーションには transform の方がパフォーマンスが良い。
- Q. 複数の transform を同時に使える？
- 使える。
transform: translateX(20px) rotate(45deg) scale(1.2)のようにスペース区切りで並べる。順番によって結果が変わるので注意（先に書いた方から適用される）。