トランスフォーム【transform】

概要

トランスフォームとは、変換する、変形する、転換するという意味の英単語。IT分野では、画面上の要素や画像などを移動、拡大・縮小、回転、変形させる処理や、そのための機能を指すことが多い。

英語の “transform” は、「～を変形させる」という他動詞、「形が変化する」という自動詞のどちらでも使われる。名詞形は「トランスフォーメーション」（transformation）だが、数学やITの分野では “transform” 自体を名詞として用い、対象を別の形に変換する操作やその結果を指すこともある。

画面表示の分野でトランスフォームという場合は、対象のデータそのものを描き直すのではなく、位置や角度などのパラメータを変更し、移動や拡大、縮小、回転、傾斜（シアー）などの幾何学的な操作を加える処理を指す。これにより、平面的（2次元）な変化だけでなく、手前や奥行きの軸（Z軸）を加えた立体的な表示変化も実現できる。ビデオ編集ソフトやグラフィックツール、ゲームエンジンなどでも標準的な機能として実装されている。

CSSのtransformプロパティ

Web制作では、CSS（Cascading Style Sheets）のtransformプロパティが代表的な用例である。HTML要素に対し、平行移動を行う「translate」、大きさを変える「scale」、回転させる「rotate」、傾かせる「skew」といった関数を指定することで、文字や画像を自在に変形できる。これらは半角スペースで区切ることで複数を組み合わせて指定することも可能である。

3次元の変形にも対応しており、「translate3d」によるX、Y、Z方向への移動や、「rotateX」「rotateY」による軸ごとの回転などが行える。「perspective」を組み合わせれば奥行きを考慮した立体的な表示も可能で、変形の基準となる位置は「transform-origin」で指定する。なお通常の文書レイアウトそのものを変更するものではなく、あくまで要素の表示上の位置や形状を変化させる処理である。

変形を時間の経過に合わせて滑らかに変化させる場合は、transition プロパティやキーフレームアニメーションと組み合わせる。例えばボタンにカーソルを合わせた際に徐々に拡大させれば、単純な切り替えではなく拡大していく過程をアニメーションとして表示できる。

近年のWebブラウザでは、こうした変形処理にGPU（グラフィックス処理装置）のハードウェアアクセラレーションを活用しており、CPUに負荷をかけずに滑らかな動きを表現できる。なお、現在のCSSではtransformプロパティに加えて、移動、回転、拡大・縮小をそれぞれtranslate、rotate、scaleという独立したプロパティとして個別に指定することもできるようになっている。

(2026.8.31更新)