Transform プレイグラウンド完全ガイド
トランスフォームとは何ですか?
CSS Transformは要素を2Dまたは3D空間で変換するプロパティです。translate、rotate、scale、skewなどの関数を使用して、要素の位置、サイズ、回転、形状を変更できます。アニメーション、インタラクティブUI、3Dエフェクトに使用されます。
Transform 関数
• Translate(px, px): 要素をX、Y軸に沿って移動。負の値は逆方向に移動。 • Rotate(deg): 要素を回転。正は時計回り、負は反時計回り。 • Scale(n, n): 要素のサイズを変更。1は元のサイズ、<1は縮小、>1は拡大。 • Skew(deg, deg): 要素をX、Y軸に沿って傾斜。奥行きエフェクトに便利。
使用方法
ステップ1: 人気のあるプリセットを選択するか、カスタムタブで手動設定します。ステップ2: translate、rotate、scale、skew値をスライダーで調整します。ステップ3: 回転/スケーリングの参照点としてtransform originを選択します。ステップ4: 3Dエフェクトのためにperspectiveを調整します。ステップ5: 結果をプレビューし、プロジェクトに適用するためにCSSコードをコピーします。
使用例
• ボタンホバーアニメーションにサイズ変更を適用 • インタラクティブなカードフリップエフェクトを作成 • ドロップダウンのスライドアニメーションを実装 • ローディングスピナーに回転エフェクトを追加 • 画像ギャラリーの3Dカードエフェクトを作成 • テキスト傾斜エフェクトで強調を追加
よくある質問 (FAQ)
- Q. ブラウザ互換性はどうですか?
- A. transformプロパティはすべての最新ブラウザ（Chrome、Firefox、Safari、Edge）で完全にサポートされています。IE10以上でも動作します。一部の3D transformは古いブラウザではサポートが制限される場合があります。
- Q. TransformとTransitionの違いは何ですか?
- A. Transformは要素の形状や位置を変更するプロパティで、Transitionはこれらの変更をスムーズにアニメーションするプロパティです。Transformで変形を定義し、Transitionを使用して自然なアニメーションのタイミングを追加します。
- Q. 複数のtransformを一緒に使用できますか?
- A. はい、スペースで区切って複数のtransform関数をチェーンできます。例：transform: translate(10px, 20px) rotate(45deg) scale(1.5); 順序が重要で、異なるシーケンスで異なる結果が生成されます。