0Pricing
CSS Academy · レッスン

Translate、Rotate、Scale

translate()で要素を移動し、rotate()で回転させ、scale()でサイズを変更します。

「Translate、Rotate、Scale」はCoddyKit上の無料CSS Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはCSS Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 CSS Academyコースには全4レッスンが含まれています。

transformプロパティ

transformは、要素に2Dおよび3Dの視覚的な変形を適用します。移動、回転、拡大縮小、傾斜などが可能です。transformはレイアウトの後に適用されるため、周囲の要素には影響しません。

translate()

要素を現在の位置から移動します。引数は x と y の移動量です。

  <div class="card demo-active">Card</div>
  <div class="wrap"><div class="centered">Centered</div></div>

translateX() と translateY() と translateZ()

明確にするための各軸用の関数です。

  <div class="slide-in active">Slide panel</div>

rotate()

要素を指定した角度だけ回転します。正の値では時計回りに回転します。

  <span class="icon demo-active">&#10148;</span>
  <span class="spinner">&#10148;</span>

scale()

要素を均一に、または軸ごとに拡大・縮小します。1 未満の値では縮小し、1 より大きい値では拡大します。

  <button class="btn demo-active">Button</button>
  <div class="thumb demo-active">Thumb</div>

scaleX() と scaleY()

一方の軸だけを個別に拡大・縮小します。

  <div class="logo">LOGO</div>

変形の組み合わせ

複数の transform 関数は右から左の順に適用されます。結果は適用順序によって変わります。

  <div class="card demo-active">Card</div>

変形の原点

transform-origin は回転や拡大・縮小の支点を設定します。デフォルトは中央（50% 50%）です。

  <div class="card demo-active">Card</div>

個別の変形プロパティ

最新の CSS では、個々の transform 関数を別々のプロパティとして設定できます。

  <div class="card demo-active">Card</div>

変形と transition

Transform は GPU 合成される 2 つのプロパティのうちの 1 つです。スムーズで高性能な効果を実現するため、必ず transition と組み合わせてアニメーションさせます。

  <div class="card demo-active">Card</div>

translate() と top/left の比較

アニメーションでは、transform: translate() を top/left より常に優先してください。Transform は GPU 合成されますが、top/left はフレームごとにレイアウトの再計算を発生させます。

確認問題

要素を水平方向に反転させる（カードを裏返すような）transform 関数はどれですか。

まとめ

transform は周囲のコンテンツに影響を与えず、レイアウト後に要素を移動、回転、拡大・縮小します。移動には translate()、回転には rotate()、サイズ変更には scale() を使用します。1 つの宣言内で複数の関数を連結できます。最新の CSS では個別の transform プロパティもサポートされています。GPU 合成による高いパフォーマンスを得るため、アニメーションには必ず transition を使用してください。

よくある質問

「Translate、Rotate、Scale」レッスンは無料ですか？

はい。「Translate、Rotate、Scale」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、CSS Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 CSS Academyコースには全4レッスンが含まれています。

「Translate、Rotate、Scale」で何を学びますか？

translate()で要素を移動し、rotate()で回転させ、scale()でサイズを変更します。 ブラウザで直接実行するハンズオンコードでCSS Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

CSS Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのCSS Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。

「Translate、Rotate、Scale」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このCSS Academyレッスンでコードを書いて実行できますか？

はい。すべてのCSS Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. Translate、Rotate、Scale
  2. SkewとMatrix変換
  3. 変換の原点とPerspective
  4. 3D変換：rotateX、rotateY、translateZ
← CSS Academyに戻る