CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのtransformプロパティで要素を変形させる方法

CSSのtransformプロパティは、要素に対して2Dまたは3Dの変形を適用するために使用されます。回転（rotate）、拡大縮小（scale）、移動（translate）、傾斜（skew）などの変換を組み合わせることで、静的なページに動きや立体感を加え、より視覚的に魅力的なデザインを実現できます。

transformプロパティの基本的な使い方

transformプロパティには、主に以下のような変換関数を指定できます。

  • rotate()：要素を指定した角度で回転させます
  • scale()：要素のサイズを拡大・縮小します
  • translate()：要素をX軸・Y軸方向に移動させます
  • skew()：要素を傾けて歪ませます

ここでは、最もよく使われるrotate()関数を使用して、要素を10度回転させる例を紹介します。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 200px;
            height: 100px;
            background-color: gray;
            transform: rotate(10deg);
         }
      </style>
   </head>
   <body>
      <h1>Rotation</h1>
      <div>Demo</div>
   </body>
</html>

コードの解説

この例では、幅200px・高さ100pxの灰色の

要素に対して、transform: rotate(10deg);を適用しています。これにより、要素が時計回りに10度傾いて表示されます。

角度の値は負の数も指定可能で、rotate(-10deg)とすれば反時計回りに回転します。また、:hover疑似クラスと組み合わせれば、マウスオーバー時に要素が回転するインタラクティブな演出も簡単に作成できます。

  1. CSSのtransform-originプロパティの使い方を解説！変形の基準点を変更する方法

    transform-originプロパティとは？ CSSのtransform-originプロパティを使うと、transformで変形（回転・拡大縮小・傾斜など）される要素の基準点（原点）を自由に変更できます。 デフォルトでは要素の中央（50% 50%）が基準点に設定されていますが、このプロパティを指定することで、回転やスケール変換の起点を要素の任意の位置に移動させることが可能です。 値の指定方法は主に以下のとおりです。 キーワード： top、bottom、left、right、center など パーセンテージ： 30% 40% のように要素のサイズに対する割合で指定 長さ（px、em な

  2. CSSアニメーションでtransformプロパティをアニメーション化する方法

    CSSを使えば、transform プロパティにも簡単にアニメーションを適用できます。transform をアニメーション化することで、要素の回転・移動・拡大縮小などを滑らかで軽量な演出として表現可能です。ここでは、@keyframes と animation プロパティを組み合わせた基本的な実装方法を解説します。 実装のポイント @keyframes：アニメーションの進行度ごとに適用するスタイル（キーフレーム）を定義します。 animation：アニメーション名や再生時間（duration）などをまとめて指定できるショートハンドプロパティです。 transform：キーフレーム内で rot