【CSS】トランスフォーム(transform)を使った要素の変形

      2016/08/15

CSSのトランスフォームプロパティを使用すると、要素を簡単に変形させる事ができます。
トランスフォームは見た目を変化させるだけなので、Webページのレイアウトに影響しないことが特徴です。
変形の種類には2D(平面)と3D(立体)の変形があります。

今回は、2Dの変形の方法について、ご紹介します。

Ⅰ.移動(translate)

    要素の位置を平行移動させるにはtransformプロパティでtranslate関数を使用します。

    transform: translate( X方向に移動させたい値, Y方向に移動させたい値 );

    X方向に移動を限定するなら、translateX()
    Y方向に移動を限定するなら、translateY()
    での指定も可能ですが、translate()で代用できるので解説は省略します。

    【使用例】box1をX方向に20pxずらす

    (CSS)
    				.wrap {
    					background: beige;
    					height: 100px;
    				}
    				#box1 {
    					width: 50px;
    					height: 50px;
    					background: gold;
    					transform: translate(20px, 10px);
    				}
    			
    (HTML)
    				<div id="box1">box1</div>
    			
    (実行結果)
    box1

Ⅱ.拡大・縮小(scale)

    要素を拡大・縮小させるにはtransformプロパティでscale関数を使用します。

    transform: scale( X方向に拡大させたい倍率, Y方向に拡大させたい倍率 );

    X方向に拡大を限定するなら、scaleX()
    Y方向に拡大を限定するなら、scaleY()
    での指定も可能ですが、scale()で代用できるので解説は省略します。

    【使用例】box1をX方向、Y方向に1.5倍拡大させる

    (CSS)
    				.wrap {
    					background: beige;
    					height: 100px;
    				}
    				#box1 {
    					width: 50px;
    					height: 50px;
    					background: gold;
    					transform: scale(1.5, 1.5);
    				}
    			
    (HTML)
    				<div id="box1">box1</div>
    			
    (実行結果)
    box1

Ⅲ.回転(rotate)

    要素を回転させるにはtransformプロパティでrotate関数を使用します。

    transform: rotate( 回転角度 );

    【使用例】box1を30度時計回りに回転させる。

    (CSS)
    				.wrap {
    					background: beige;
    					height: 100px;
    				}
    				#box1 {
    					width: 50px;
    					height: 50px;
    					background: gold;
    					transform: rotate(30deg);
    				}
    			
    (HTML)
    				<div id="box1">box1</div>
    			
    (実行結果)
    box1

Ⅳ.斜変形(skew)

    要素を斜変形させるにはtransformプロパティでskew関数を使用します。

    transform: skew( X方向の傾斜角度, Y方向の傾斜角度 );

    X方向に傾斜を限定するなら、skewX()
    Y方向に傾斜を限定するなら、skewY()
    での指定も可能ですが、skew()で代用できるので解説は省略します。

    【使用例】box1をX方向、Y方向に10度傾斜させる

    (CSS)
    				.wrap {
    					background: beige;
    					height: 100px;
    				}
    				#box1 {
    					width: 50px;
    					height: 50px;
    					background: gold;
    					transform: skew(10deg, 10deg);
    				}
    			
    (HTML)
    				<div id="box1">box1</div>
    			
    (実行結果)
    box1

Ⅴ.複数の変形を組み合わせる

    【使用例】移動、拡大、回転、傾斜をまとめて指定した場合

    (CSS)
    				.wrap {
    					background: beige;
    					height: 100px;
    				}
    				#box1 {
    					width: 50px;
    					height: 50px;
    					background: gold;
    					transform: translate(20px,10px) scale(1.5, 1.5) rotate(30deg) skew(-10deg, -10deg);
    				}
    			
    (HTML)
    				<div id="box1">box1</div>
    			
    (実行結果)
    box1

まとめ

傾斜は、ほとんど使ったことがありませんが、拡大縮小、回転は、よく使っています。
transitionプロパティと組み合わせてアニメーションさせるのも面白いです。

 - css , , , , ,