レンちゃんとペンタ

CSSで可能な変形いろいろ(拡大縮小・回転など)

CSSで可能な変形いろいろ(拡大縮小・回転など)

拡大・縮小や回転、傾斜。
Illustrator等の画像編集アプリケーションではお馴染みのこうした変形は、CSSのtransformプロパティで実装することが可能です。

    Webデザインとブログで豊かに引きこもる。

    レンちゃんとペンタ

    Webデザインは器。ブログは中身。
    「レンちゃんとペンタ」では、2つのスキルを掛け合わせて、
    おウチで豊かに楽しく暮らす方法をご紹介しています。

    要素の変形にはtransformプロパティ

    拡大縮小でも回転でも、変形に関するプロパティにはtransformを使います。
    基本の使い方は以下の通りです。

    /* transformプロパティの値に、変形の種類と変形量を設定 */
    div{
      transform: 変形の種類(変形量);
    }
    

    以下、transformプロパティで行える代表的な変形の種類です。

    移動
    ・translate:移動
    ・translate3d:3D移動
    ・translateX/Y/Z:X/Y/Z方向の移動
    拡大・縮小
    ・scale:拡大・縮小
    ・scale3d:3Dの拡大・縮小
    ・scaleX/Y/Z:X/Y/Z方向の拡大・縮小
    回転
    ・rotate:回転
    ・rotate3d:3Dの回転
    ・rotateX/Y/Z:X/Y/Z方向の回転
    傾斜
    ・skew:要素の傾斜
    ・skewX/Y:XX/Y方向の傾斜

    このページでは省略しますが、他にmaxtrixやmatrix3d(行列を利用した変形)、perspective(遠近感のついた変形設定)などもあります。

    移動

    translate:要素を移動する

    要素を移動する事のできるプロパティです。
    ちょっと違和感があるかもしれませんが、移動も変形の仲間として扱われているんですね。

    サンプル
    以下は、要素を本来の位置からX方向に10px、Y方向へ20px移動させた例です。

    div{
      transform: translate(10px, 20px);
    }
    
    左:デフォルト位置。右:デフォルト位置から右に10px、下へ20pxへ移動

    値が1つの場合は、縦横とも同じ移動量になります。

    /* X方向もY方向も20px移動 */
    div{
      transform: translate(20px);
    }
    

    translate3d:3Dによる移動

    translate3dプロパティを使うと、3Dを意識した移動設定を行うことができます。
    Z軸は、画面の手前/奥に関する軸です。

    /* X方向に10px、Y方向へ20px、Z方向へ50px移動 */
    div{
      transform: translate3d(10px, 20px, 50px);
    }
    

    translateX/Y/Z:X/Y/Z方向の移動

    1方向のみの移動を設定する場合は、translateX、translateY、translateZプロパティを使うことができます。

    /* X方向の移動 */
    div{ transform: translateX(10px); }
    
    /* Y方向の移動 */
    div{ transform: translateY(10px); }
    
    /* Z方向の移動 */
    div{ transform: translateZ(10px); }
    

    拡大・縮小

    scale:要素を拡大・縮小する

    要素を拡大・縮小する事のできるプロパティです。

    サンプル
    以下は、要素の幅を150%、縦を50%に変形させた例です。

    div{
      transform: scale(1.5, .5);
    }
    
    左:デフォルト、右:デフォルトサイズから幅を150%、縦を50%に拡大

    値が1つの場合は、縦横とも同じ拡大・縮小率になります。

    /* 幅も高さも50%に縮小 */
    div{
      transform: scale(.5);
    }
    

    scale3d:3Dによる拡大・縮小

    scale3dプロパティを使うと、3Dを意識した拡大・縮小を行うことができます。

    /* X方向は150%、Y方向は50%、Z方向は70%に拡大・縮小 */
    div{
      transform: scale3d(1.5, .5, .7);
    }
    

    scaleX/Y/Z:X/Y/Z方向の拡大・縮小

    1方向のみの拡大・縮小率を設定する場合は、scaleX、scaleY、scaleZプロパティを使うことができます。

    /* X方向の拡大・縮小 */
    div{ transform: scaleX(1.5); }
    
    /* Y方向の拡大・縮小 */
    div{ transform: scaleY(1.5); }
    
    /* Z方向の拡大・縮小 */
    div{ transform: scaleZ(1.5); }
    

    回転

    rotate:要素を回転させる

    要素を回転する事のできるプロパティです。

    サンプル
    以下は、要素を45度回転させた例です。

    div{
      transform: rotate(45deg);
    }
    
    左:デフォルト、右:デフォルト位置から要素を45度回転

    rotate3d:3Dによる回転

    rotate3dプロパティを使うと、3Dを意識した回転設定を行うことができます。

    サンプル
    rotate3dは使い方が特殊で、4つの値を必要とします。
    ・最初の3つの値:回転方向のベクトルを定める(それぞれがX・Y・Zを表す)
    ・4つ目の値:回転の角度

    div{
      transform: rotate3d(1, .5, .5, 60deg);
    }
    
    左:デフォルト、右:3D回転させた例

    rotateX/Y/Z:X/Y/Z方向の回転

    1方向のみの回転を設定する場合は、rotateX、rotateY、rotateZプロパティを使うことができます。

    /* X軸の回転 */
    div{ transform: rotateX(45deg); }
    
    /* Y軸の回転 */
    div{ transform: rotateY(45deg); }
    
    /* Z軸の回転 */
    div{ transform: rotateZ(45deg); }
    

    傾斜

    skew:要素を傾斜させる

    要素を傾斜する事のできるプロパティです。

    サンプル
    以下は、要素をX方向に10度、Y方向に20度傾斜させた例です。

    div{
      transform: skew(10deg, 20deg);
    }
    
    左:デフォルト、右:デフォルト位置から右に10度、下に20度傾斜

    値が1つの場合は、縦横とも同じ傾斜角度になります。

    /* X方向もY方向も20度傾斜 */
    div{
      transform: skew(20deg);
    }
    

    skewX/Y:X/Y方向の傾斜

    1方向のみの傾斜を設定する場合は、skewX、skewYプロパティを使うことができます。

    /* X軸の傾斜 */
    div{ transform: skewX(20deg); }
    
    /* Y軸の傾斜 */
    div{ transform: skewY(20deg); }
    

    変形の基準位置を指定する

    transform-origin

    通常の変形では、要素の中心を基準位置としますが、transform-originプロパティを使うと、その位置を変更することができます。

    サンプル
    以下は、transform-originプロパティを使った回転の基準位置に関する例です。

    左:回転前、中:通常の回転、右:左上を基準とした回転

    ・左:回転していない状態
    ・中央:通常の回転。回転の基準点は、要素の中心
    ・右:transform-originプロパティで、基準点を左上に変更した回転

    /* 基本の回転(要素の中心を起点に回転) */
    div{
      transform: rotate(20deg);
    }
    
    /* 回転の起点を左上に設定 */
    div{
      transform-origin: top left;
      transform: rotate(20deg);
    }
    

    transform-originプロパティでは、以下のキーワードを設定することができます。
    ・縦方向のバリエーション:top / center / bottom
    ・横方向のバリエーション:left / center / right

    また、数値やパーセントで指定することもできます。

    /* 数値で指定した例 */
    div { transform-origin: 50px 100px; }
    
    /* パーセントで指定した例 */
    div { transform-origin: 10% 30%; }
    

    実用的な使い方

    こうした変形、どんな場合に使えば良いでしょう?
    単純に拡大縮小・回転したいのであれば、要素そのものを直接変形すればいいですよね。
    CSSによる変形は、マウスイベントと組み合わせる時に役立ちます。
    以下は、マウスオーバーすると要素が拡大する例です。

    a:hover {
      transform: scale(1.2);
    }
    
    マウスオーバー時に拡大

    一緒にtransitionプロパティを使うと、アニメーションになります。

    a:hover {
      transform: scale(1.2);
      transition: transform .3s;
    }
    
    マウスオーバー時に拡大アニメーション

    まとめ

    1. Home
    2. CSSで可能な変形いろいろ(拡大縮小・回転など)

    Related Posts