6XC

CSSトランスフォーム ジェネレーター

回転・拡大縮小・移動・傾斜を視覚的に組み合わせ、生成されたtransformのCSSをコピーできます。

973回閲覧

transformプロパティ

transformは要素を文書の流れに影響を与えずに移動・回転・拡大縮小・傾斜させ、GPUアクセラレーションが効きます — これがtransform(とopacity)が滑らかなアニメーションに好んで使われる理由です。関数は右から左へ適用されるため順序が重要です: rotate(45deg) translateX(50px)は逆順とは異なる結果になります。

よくある質問

なぜ関数の順序が重要なのですか?

各関数は次の関数のための座標系を変形させます。translateの後にrotateを行うと、まず移動してからその場で回転します。rotateの後にtranslateを行うと、先に軸が回転するため移動が斜め方向になります。

transformは周囲の要素に影響しますか?

いいえ — 要素はレイアウト上の元の空間を保持します。そのためtransformは低コストでアニメーションできますが、要素同士の重なりには注意が必要です。

関連ツール

CSSグラデーション ジェネレーター ライブプレビューを見ながら線形・放射状・円錐形のCSSグラデーションをデザインし、コードをコピーできます。 使ってみる CSS Box Shadow(ボックスシャドウ)ジェネレーター オフセット・ぼかし・広がり・色・不透明度・内側影(inset)をビジュアルに調整し、ライブプレビューで影をデザインします。 使ってみる CSS Border Radiusジェネレーター 各角を個別に、または一括でpxか%で丸め、ライブプレビューとコピー可能なCSSを確認できます。 使ってみる CSSテキストシャドウ ジェネレーター オフセット・ぼかし・色・不透明度を調整してtext-shadowをデザインし、サンプルテキストでライブプレビューできます。 使ってみる