デザイン・Web制作

CSS transform 効果集

CSS transformの重複しない実用プリセット29種。2D・3D・hover/focus・active・アイソメトリック・遠近感を選び、パラメータと操作状態をCSSへ反映。必要な親perspectiveも生成。

登録不要

選択中のプリセット

右傾きTilt Right

右に軽く5度傾ける。アクセント付けに

2D
パラメータ

プリセットカテゴリー

transformプリセット

CSS

.element {
  transform: rotate(5deg);
}

HTML + CSS 例

<!-- HTML -->
<div class="element">Hello</div>

/* CSS */
.element {
  transform: rotate(5deg);
}

このツールについて問い合わせる →

CSS transform 効果集について

CSS transformとは

CSS transformは、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させるプロパティです。CSSボックスモデル上では周囲の通常フローを動かしませんが、変形後の領域はoverflowへ影響し、none以外のtransformはstacking contextも作ります。

3D関数（rotateX/Y/Z、translateZ）とperspectiveを組み合わせると奥行きを表現できます。本ツールは重複しない29種類のプリセットを、2D・3D・操作状態（hover／focus／active）・アイソメトリック・遠近感の5カテゴリに整理しています。

主なtransform関数

関数効果例
translate(x,y)移動translate(10px, 20px)
rotate(deg)2D回転rotate(45deg)
scale(x,y)拡大縮小scale(1.2)
skew(x,y)傾斜skewX(10deg)
rotateX/Y/Z(deg)3D軸回転rotateY(180deg)
translateZ()Z軸方向の移動translateZ(100px)

複数の関数は1つのtransformへ空白区切りで指定でき、記述順によって結果が変わります。本ツールは表示中の順序をそのまま出力します。

3D効果とperspectiveの関係

rotateXやrotateYで3D回転を適用しても、平面的な変形にしか見えない場合があります。これは視点（perspective）が設定されていないためです。

perspectiveは2通りの設定方法があります：

  • 親要素に指定: .parent { perspective: 600px; } — 複数子要素に共通の視点を設定
  • transform関数として指定: transform: perspective(600px) rotateY(30deg) — 要素単体に視点設定

本ツールでは、奥行きを使うプリセットに親要素用のperspectiveを生成します。transform-style: preserve-3dは、3D変形した子孫と共通の3D空間を作るための別プロパティなので、直接の子だけを変形する例へは自動追加しません。

transform-originで変形の基準点を制御

transform-originプロパティで、回転や拡大の中心点を変更できます。デフォルトは要素の中央（50% 50%）です。

  • transform-origin: top left; — 左上を基準に回転（本のページめくりなど）
  • transform-origin: bottom center; — 振り子のような動き
  • transform-origin: 0 100%; — 左下固定でスタンプ風

ホバー効果やアニメーションでは、transform-originを適切に設定すると表現の幅が大きく広がります。

よくある質問

Q. transformとtranslateの使い分けは？
transformは複数の変形関数を1つのリストとして指定できます。translate・rotate・scaleには個別プロパティもありますが、適用順序の規則が異なるため単純な置き換えではありません。本ツールはtransformプロパティ形式で出力します。
Q. transformを使うとテキストがぼやけます
小数位置や拡大縮小では、ブラウザ・OS・文字サイズによって文字の見え方が変わることがあります。固定のGPU化指定で改善を保証することはできません。実際の対象環境で確認し、必要なら変形量や文字サイズを調整してください。
Q. transitionと組み合わせるには？
transition: transform 0.3s ease のように指定します。画面の『transitionを追加』はCSSとHTML + CSS例の両方へ反映されます。持ち上がる・拡大などはhoverとfocus-visible、押し込みはactiveの例を出力します。
Q. transformは常にGPUで高速になりますか？
いいえ。transformは周囲の通常フローを再配置しませんが、合成方法や描画コストはブラウザ、端末、変形内容、対象要素によって異なります。実際のページを開発者ツールで計測し、prefers-reduced-motionへの代替も用意してください。

関連ツール

CSSアニメーション集（@keyframes）

CSS @keyframesアニメ32種をカテゴリ別に選択し、再生時間・遅延・イージング・繰り返しを調整。ホバーとキーボード操作、動き軽減に対応したCSS・HTML例を生成。

ボックスシャドウ生成ツール

CSSのbox-shadowを最大8層までGUIで作成。inset、Tailwind CSS v4・ニューモーフィズムなど13種のプリセット、CSS・任意値クラスのコピーに対応。

border-radius 形状集（squircle近似対応）

border-radiusで作る重複しない形状プリセット33種。基本角丸・非対称・squircle近似・有機的なblob・方向性シェイプを収録。同一単位の8値を0〜100%または0〜9999pxで調整し、サイズ別に確認できます。

このツールを評価
—(0件)