CSS transformの実用プリセット31種。2D（回転・反転・ズーム）、3D（rotateX/Y/Z）、ホバー効果、アイソメトリック、遠近感まで網羅。parent側のperspective設定も自動生成。
右傾きTilt Right
右に軽く5度傾ける。アクセント付けに
.element {
transform: rotate(5deg);
}<!-- HTML -->
<div class="element">Hello</div>
/* CSS */
.element {
transform: rotate(5deg);
}CSS transformは、要素を移動（translate）・回転（rotate）・拡大縮小（scale）・傾斜（skew）させるプロパティです。レイアウトを再計算せずGPUで処理されるため、アニメーションと組み合わせても軽快に動作します。
さらに3D関数（rotateX/Y/Z、translate3d、perspective）を使えば立体的な効果も実現できます。本ツールは31種類の実用プリセットを、2D・3D・ホバー・アイソメトリック・遠近感の5カテゴリに整理して提供します。
| 関数 | 効果 | 例 |
|---|---|---|
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) |
translate3d() | GPU加速移動 | translate3d(0,0,100px) |
これらは1つのtransformプロパティに複数スペース区切りで指定できます（例: transform: rotate(15deg) scale(1.1) translateY(-5px);）。
rotateXやrotateYで3D回転を適用しても、平面的な変形にしか見えない場合があります。これは視点（perspective）が設定されていないためです。
perspectiveは2通りの設定方法があります：
.parent { perspective: 600px; } — 複数子要素に共通の視点を設定transform: perspective(600px) rotateY(30deg) — 要素単体に視点設定本ツールでは、3D・アイソメトリック・遠近感カテゴリの各プリセットに、親要素用のperspective設定も自動生成されます。
transform-originプロパティで、回転や拡大の中心点を変更できます。デフォルトは要素の中央（50% 50%）です。
transform-origin: top left; — 左上を基準に回転（本のページめくりなど）transform-origin: bottom center; — 振り子のような動きtransform-origin: 0 100%; — 左下固定でスタンプ風ホバー効果やアニメーションでは、transform-originを適切に設定すると表現の幅が大きく広がります。
CSSアニメーション集（@keyframes）
コピペで使えるCSS @keyframesアニメ32種。fadeIn・bounce・pulse・shake・spin・tadaなど定番を全網羅。カテゴリ別（注目・登場・退場・ループ・ホバー・特殊）に整理。再生時間・イージング調整可。
ボックスシャドウ生成ツール
CSSのbox-shadowをGUIで作成。多重シャドウ・inset対応。Material Design・Neumorphismなど13種のプリセット付き。CSSコードをワンクリックコピー。
border-radius 形状集（squircle対応）
border-radiusで作れる形状プリセット33種。基本角丸・非対称・squircle（iOS風）・有機的なblob・方向性シェイプまで対応。8値エディタでコーナー別微調整、幅高さでプレビュー確認可能。