CSS transformジェネレーター（回転、移動、拡大縮小、傾斜、3D）

CSS transformジェネレーター（回転、移動、拡大縮小、傾斜、3D）: 用途

transformプロパティは、ページのレイアウトに影響を与えずに要素を移動、回転、拡大縮小、傾斜でき、アニメーションで最も軽い方法です。移動、回転、拡大縮小、傾斜、3D回転のコントロールを動かし、基準点とパースペクティブを選ぶと、カードがその場で変化します。

コードはブラウザーが関数を適用する順番で出力されます。ホバーのオプションを選ぶと、マウス利用者だけに効き、動きを減らす設定の利用者には無効になるなめらかなトランジションが付きます。ページでは、順番が重要な理由と、transformのアニメーションがtop、left、widthより軽い理由も説明しています。

使い方

1. コントロールを動かします。
2. 基準点と、3Dの場合はパースペクティブを選びます。
3. CSSをコピーします。

使うタイミング

• カードのホバー効果。
• 回転や反転させたアイコン。
• 3Dで裏返るカード。

よくある質問

transformの関数の順番は重要ですか？

重要です。「translateX(100px) rotate(45deg)」は移動してからその場で回転します。「rotate(45deg) translateX(100px)」は先に回転し、回転した向きに進むので、別の位置に着きます。ジェネレーターは最も予測しやすい、移動、回転、拡大縮小、傾斜の順で出力します。

アニメーションにtransformを使うのはなぜですか？

transformとopacityは、アニメーションの負荷が最も小さいプロパティです。ブラウザーがページのレイアウトを再計算せず、たいていGPUで処理されます。代わりにtop、left、width、marginをアニメーションさせると、性能の低いスマートフォンでカクつきます。

パースペクティブは何をしますか？

3D回転（rotateXとrotateY）では、パースペクティブが視点までの距離を決めます。300pxのような小さい値は強くゆがんだ3D効果になり、1500pxのような大きい値は回転がなめらかになります。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール