CSS Transform ビジュアライザー

スライダーを動かして transform の変化をリアルタイム確認。transform-origin で基準点も調整できます。

translateX
0px
translateY
0px
rotate
0deg
scale
1.0
skewX
0deg
skewY
0deg
transform-origin

center center

Box
CSS
.box {
  transform: none;
  transform-origin: center center;
  transition: transform 0.3s ease;
}

使い方

  1. 左のスライダーで translateX/Y・rotate・scale・skewX/Y を調整しよう
  2. 右のプレビューで変形がリアルタイムに確認できます（破線が元の位置）
  3. transform-origin の 3×3 グリッドで変形の基準点を切り替えよう
  4. 「滑らかに変化」 をONにすると transition アニメーション付きで動きます
  5. 下の CSS コードをコピーして自分のスタイルシートに貼り付けよう！

CSS Transformをもっと詳しく学ぼう

関連ツール

✨ CSS Transitionビジュアライザー 🎬 CSS Animationビジュアライザー 📌 CSS Positionビジュアライザー 🎯 CSS Selector ビジュアライザー

詰まったら、ここから質問してね ❓

僕が直接返事するので、数日以内に届きます。

質問フォームへ