Transformジェネレーター
CSSのtransformプロパティを視覚的に作成し、プレビューします。
CSS Transformは、ウェブ要素を2Dまたは3D空間で変形させることができる強力なCSSプロパティです。translate、rotate、scale、skewなどの変換を通じて、動的でインタラクティブなウェブデザインを作成できます。リアルタイムプレビューで目的の効果を簡単に作成できます。
トランスフォーム設定
各トランスフォームプロパティを調整します
プレビュー
生成されたトランスフォーム効果を確認します
Transform
生成されたCSS
transform: none;プリセット
定義済みのトランスフォームスタイルを試します
Transform関数リファレンス
Transform関数
- • translate(x, y): translate(x, y): 要素をx, yの量だけ移動
- • scale(x, y): scale(x, y): 要素をx, yの比率で拡大縮小
- • rotate(angle): rotate(angle): 要素を角度だけ回転
- • skew(x, y): skew(x, y): 要素をx, yの角度だけ傾斜
使用のヒント
- • 複数のtransform関数はスペースで組み合わせ可能
- • transform-originで変換の基点を変更
- • transitionと併用してアニメーション効果を作成
- • 3D変換にはperspectiveプロパティを使用
📚 CSS Transform完全ガイド
CSS Transformをマスターするための詳細ガイド
🎯 Transformの基本概念
CSS Transformは、要素の形状、サイズ、位置を変更するCSSプロパティです。通常のドキュメントフローを妨げることなく、要素を視覚的に変換できます。
基本構文:
transform: function(value) function(value) ...;📐 Transform関数の詳細
🔄 Translate (移動)
- •
translate(x, y): translate(x, y): X, Y軸に沿って移動 - •
translateX(x): translateX(x): X軸に沿ってのみ移動 - •
translateY(y): translateY(y): Y軸に沿ってのみ移動 - •
translate3d(x, y, z): translate3d(x, y, z): 3D移動
transform: translate(50px, 100px);📏 Scale (拡大縮小)
- •
scale(x, y): scale(x, y): X, Y軸で拡大縮小 - •
scaleX(x): scaleX(x): X軸のみ拡大縮小 - •
scaleY(y): scaleY(y): Y軸のみ拡大縮小 - • 1より大きいと拡大、1より小さいと縮小
transform: scale(1.5, 0.8);🔄 Rotate (回転)
- •
rotate(angle): rotate(angle): Z軸周りに回転 - •
rotateX(angle): rotateX(angle): X軸周りに回転 - •
rotateY(angle): rotateY(angle): Y軸周りに回転 - • 角度にはdeg, rad, turn単位を使用
transform: rotate(45deg);📐 Skew (傾斜)
- •
skew(x, y): skew(x, y): X, Y軸に沿って傾斜 - •
skewX(angle): skewX(angle): X軸に沿って傾斜 - •
skewY(angle): skewY(angle): Y軸に沿って傾斜 - • 平行四辺形に変形
transform: skew(15deg, 5deg);🎨 Transform Origin (変換の基点)
transform-originプロパティは変換の基点を設定します。デフォルトは要素の中心（50% 50%）です。
キーワードを使用
transform-origin: top left;パーセンテージを使用
transform-origin: 25% 75%;ピクセルを使用
transform-origin: 10px 20px;⚡ パフォーマンス最適化のヒント
✅ 推奨事項
- • transformとopacityのみをアニメーション化
- • will-changeプロパティを使用
- • 3Dアクセラレーションを使用 (translateZ(0))
- • パフォーマンス向上のために合成レイヤーを作成
❌ 避けるべきこと
- • width, heightのアニメーション化
- • left, top位置のアニメーション化
- • 過度なtransformのネスト
- • 不要なwill-changeの使用
パフォーマンス最適化の例:
.optimized {
will-change: transform;
transform: translateZ(0); /* 3D 가속 */
transition: transform 0.3s ease;
}🎬 アニメーションとトランジション
TransformはCSS TransitionやAnimationと併用して、滑らかな効果を作成できます。
トランジションの例
.hover-effect {
transition: transform 0.3s ease;
}
.hover-effect:hover {
transform: scale(1.1) rotate(5deg);
}キーフレームアニメーションの例
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.bounce { animation: bounce 1s infinite; }🌐 ブラウザ互換性
CSS Transformはすべてのモダンブラウザでサポートされていますが、古いブラウザではベンダープレフィックスが必要な場合があります。
ベンダープレフィックスの例:
-webkit-transform: rotate(45deg); /* Safari, Chrome */
-moz-transform: rotate(45deg); /* Firefox */
-ms-transform: rotate(45deg); /* IE 9 */
transform: rotate(45deg); /* 표준 */🎯 実用的な使用例
カードのホバー効果
.card {
transition: transform 0.3s ease;
cursor: pointer;
}
.card:hover {
transform: translateY(-10px) scale(1.02);
}ローディングスピナー
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}モーダルの出現効果
.modal {
transform: scale(0) rotate(180deg);
transition: transform 0.3s ease;
}
.modal.show {
transform: scale(1) rotate(0deg);
}ボタンのクリック効果
.button {
transition: transform 0.1s ease;
}
.button:active {
transform: scale(0.95);
}🔧 デバッグと開発ツール
ブラウザ開発者ツール
- • 要素パネルでのリアルタイム編集
- • 計算済みタブで最終値を確認
- • パフォーマンスタブでパフォーマンス分析
- • 3Dビューでレイヤー構造を確認
便利なCSSプロパティ
- •
transform-style: preserve-3d - •
perspective: 1000px - •
backface-visibility: hidden - •
will-change: transform
💡 プロのヒント
パフォーマンスのヒント
transform3d()またはtranslateZ(0)を使用して合成レイヤーを作成し、GPUアクセラレーションを有効にすると、アニメーションのパフォーマンスが大幅に向上します。
アクセシビリティのヒント
動きに敏感なユーザーのために、prefers-reduced-motionメディアクエリを使用して代替手段を提供します。
デザインのヒント
transform-originを適切に設定すると、より自然な変換効果を作成できます。
開発のヒント
CSS変数を使用してtransformの値を動的に制御すると、JavaScriptとの連携が容易になります。