東京都府中市、九段下のWEB制作会社Maromaroのブログです

2017.08.16

miura

CSSで要素を変形!CSS Transformの基本をおさらいしよう~translate、scale編~

こんにちは。三浦です。
先日「鉱石キャンドル」なるものを作りました。色付けなどを工夫して作ったキャンドルを鉱石っぽくなるように砕くとできるのですが、キャンドルをカッターでガリガリ砕いて変形させていく工程がなかなか楽しかったです。

さて今回はCSS Transformについて紹介させて頂きます。
CSS Transformは前回紹介したCSS Transitionと組み合わせることで簡単にCSSのアニメーションを実現することができます。

↓CSS Transitionについてはこちらをご覧ください。

今回Transformの主要な4つの関数について記事で掘り下げようと思ったのですが、
長くなってしまったため記事を二回に分けて紹介させていただきます。

CSS Transformとは

CSS TransformとはCSS3で新たに追加されたプロパティで、設定された要素を変形させることができます。
変形させる内容については移動拡大縮小歪み回転があります。今回は移動拡大縮小ができる二つの関数を紹介していきます。

注意:ベンダープレフィックスが必要です

その前に大事なお話です。CSS Transformを記述する際にはIE9、androidなどのブラウザに対応させるためにベンダープレフィックスの記述が必要です。
下記の様に記述しましょう。

-webkit-transform : rotate(10deg) ;
-ms-transform : rotate(10deg) ;
transform : rotate(10deg) ;

移動(translate)

さて最初に紹介する関数は指定した要素を基準の位置から移動させるTransformプロパティの関数になります。

2D移動

X軸…横の移動

transform: translateX(50px);

Y軸…縦の移動

transform: translateX(50px);

3D移動

Z軸…奥行きの移動

transform: translateZ(50px);

注意:Z軸を利用した奥行きの移動について

Z軸を使用する場合は親要素にperspectiveプロパティを設定するか、同じtransformプロパティでperspectiveを指定することで要素に奥への傾きをつけてください。でないと要素が奥に移動しても遠近感が出ません

transform: perspective(400px) translateZ(300px);

と指定することで要素を奥に移動することができます。

ショートハンドラ

複数記述する場合は記述を省略することが出来ます。

X、Y軸の2D移動の記述

transform: translate(50px, 50px);

X、Y、Z軸の3D移動の記述

transform: translate3d(50px, 50px, 50px);

簡単に見てみましょう。以下はマウスオーバーで要素が移動するようになっています。

  • RESULT
  • HTML
  • CSS
  • X軸

    カーソルをここに!

    Y軸

    カーソルをここに!

    Z軸

    カーソルをここに!

  • コピー
    
    <div id="sample01">
    <p>X軸</p>
    <p class="btn01">カーソルをここに!</p>
    <p>Y軸</p>
    <p class="btn02">カーソルをここに!</p>
    <p>Z軸</p>
    <p class="btn03">カーソルをここに!</p>
    </div>
    
  • コピー
    
    #sample01 .btn01{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample01 .btn01:hover{
      -webkit-transform : translateX(30px);
      -ms-transform : translateX(30px);
      transform : translateX(30px);
    }
    #sample01 .btn02{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample01 .btn02:hover{
      -webkit-transform : translateY(30px);
      -ms-transform : translateY(30px);
      transform : translateY(30px);
    }
    #sample01 .btn03{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample01 .btn03:hover{
      -webkit-transform : perspective(400px) translateZ(300px);[
      -ms-transform : perspective(400px) translateZ(300px);[
      transform : perspective(400px) translateZ(300px);[
    }
    
  • コピー

要素を移動させる他のCSSとの比較

positionを使っても同じような動きはできます。
ちょっと比較してみましょう。

  • RESULT
  • HTML
  • CSS
  • translateで横移動

    カーソルをここに!

    positionで横移動

    カーソルをここに!

  • コピー
    
    <div id="sample02">
    <p>translateで横移動</p>
    <p class="btn01">カーソルをここに!</p>
    <p>positionで横移動</p>
    <p class="btn02">カーソルをここに!</p>
    </div>
    
  • コピー
    
    #sample02 .btn01{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample02 .btn01:hover{
      -webkit-transform : translateX(50px);
      -ms-transform : translateX(50px);
      transform : translateX(50px);
    }
    #sample02 .btn02{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
      position: relative;
      top: 0;
      left: 0;
    }
    #sample02 .btn02:hover{
      left:50px;
      top: 0;
    }
    
  • コピー

positionで移動すると少しカクつきますね!IE8以下の対応などが必要な場合以外はtranslateで動かした方が無難そうです。

拡大縮小(scale)

指定した要素を拡大縮小するTransformプロパティの関数になります。
下記のコードで(1.5)となっているところは1.5倍にするということになります。マイナス値にすることで縮小することもできます。

2D拡大

X軸…横の拡大縮小

transform: scaleX(1.5);

Y軸…縦の拡大縮小

transform: scaleY(1.5);

ショートハンドラ

複数記述する場合は記述を省略することが出来ます。

X、Y軸の拡大縮小

transform:scale(1.5,1.5);

では実際見てみましょう。

  • RESULT
  • HTML
  • CSS
  • X軸の拡大

    カーソルをここに!

    Y軸の拡大

    カーソルをここに!

    X、Y軸拡大

    カーソルをここに!

  • コピー
    
    <div id="sample03">
    <p>X軸の拡大</p>
    <p class="btn01">カーソルをここに!</p>
    <p>Y軸の拡大</p>
    <p class="btn02">カーソルをここに!</p>
    <p>X、Y軸拡大</p>
    <p class="btn03">カーソルをここに!</p>
    
  • コピー
    
    #sample03 .btn01{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample03 .btn01:hover{
      -webkit-transform : scaleX(1.5);
      -ms-transform : scaleX(1.5);
      transform : scaleX(1.5);
    }
    #sample03 .btn02{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample03 .btn02:hover{
      -webkit-transform : scaleY(1.5);
      -ms-transform : scaleY(1.5);
      transform : scaleY(1.5);
    }
    #sample03 .btn03{
      background-color: #000066;
      border:1px solid #999999;
      border-radius: 2px;
      color: #fff;
      display: block;
      font-size: 14px;
      padding: 14px;
      text-align: center;
      text-decoration: none;
      width: 160px;
      cursor: pointer;
      margin-bottom:30px;
      transition: 0.6s ease-in-out;
      -o-transition: 0.6s ease-in-out;
      -moz-transition: 0.6s ease-in-out;
      -webkit-transition: 0.6s ease-in-out;
    }
    #sample03 .btn03:hover{
      -webkit-transform : scale(1.5,1.5);
      -ms-transform : scale(1.5,1.5);
      transform : scale(1.5,1.5);
    }
    
  • コピー

このようにCSSを記述するだけでお手軽に要素を拡大縮小させることができます。

まとめ

translate、scaleを利用することでCSSだけで簡単にアニメーションを実現することができます。
CSS Transformを駆使してあなたのWebサイトをリッチにしましょう。
次回はrotate、skewについてご紹介したいと思います!それでは!