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

2017.08.17

miura

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

こんにちは。三浦です。

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

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

CSS Transformとは

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

↓前回の記事はこちら

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

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

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

回転(rotate)

指定した要素を回転させるTransformプロパティの関数になります。
回転させる角度はdegという単位で指定します。degはdegree(ディグリー)の略で円周360度を表す数値になります。
degをマイナスで指定すると逆回転になります。

2D回転

X軸…横の回転

transform: rotateX(45px);

Y軸…縦の回転

transform: rotateY(45px);

ショートハンドラ

X、Y軸の回転

transform: rotate(45px, 45px);

実際に見てみましょう。

  • RESULT
  • HTML
  • CSS
  • X軸の回転

    カーソルをここに!

    Y軸の回転

    カーソルをここに!

    X、Y軸の回転

    カーソルをここに!

    逆回転

    カーソルをここに!

  • コピー
    
    <div id="sample01">
    <p>X軸の回転</p>
    <p class="btn01">カーソルをここに!</p>
    <p>Y軸の回転</p>
    <p class="btn02">カーソルをここに!</p>
    <p>X、Y軸の回転</p>
    <p class="btn03">カーソルをここに!</p>
    <p>逆回転</p>
    <p class="btn04">カーソルをここに!</p>
    
  • コピー
    
    #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: rotateX(360deg);
      -ms-transform: rotateX(360deg);
      transform: rotateX(360deg);
    }
    #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: rotateY(360deg);
      -ms-transform: rotateY(360deg);
      transform: rotateY(360deg);
    }
    #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: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
    }
    #sample01 .btn04{
      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 .btn04:hover{
      -webkit-transform: rotate(-360deg);
      -ms-transform: rotate(-360deg);
      transform: rotate(-360deg);
    }
    
  • コピー

歪み(skew)

指定した要素を歪ませるTransformプロパティの関数になります。
傾斜させる角度はrotateと同じくdegという単位で指定します。
そして同じくdegをマイナスで指定すると逆回転になります。

2D歪み

X軸…横の歪み

transform:skewX(45deg);

Y軸…縦の歪み

transform:skewY(45deg);

ショートハンドラ

X、Y軸の歪み

transform:skew(45px, 45px);

実際に見てみましょう。

  • RESULT
  • HTML
  • CSS
  • X軸の歪み

    カーソルをここに!

    Y軸の歪み

    カーソルをここに!

    X、Y軸の歪み

    カーソルをここに!

  • コピー
    
    <div id="sample02">
    <p>X軸の歪み</p>
    <p class="btn01">カーソルをここに!</p>
    <p>Y軸の歪み</p>
    <p class="btn02">カーソルをここに!</p>
    <p>X、Y軸の歪み</p>
    <p class="btn03">カーソルをここに!</p>
    
  • コピー
    
    #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{
      -ms-transform:skewX(45deg);
      -webkit-transform:skewX(45deg);
      transform:skewx(45deg);
    }
    #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;
    }
    #sample02 .btn02:hover{
      -ms-transform:skewY(45deg);
      -webkit-transform:skewY(45deg);
      transform:skewY(45deg);
    }
    #sample02 .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;
    }
    #sample02 .btn03:hover{
      -ms-transform:skew(45deg,45deg);
      -webkit-transform:skew(45deg,45deg);
      transform:skew(45deg,45deg);
    }
    
  • コピー

まとめ

rotate、skewを利用することでCSS3ならではの手が込んだアニメーションが実装できます。
マウスオーバー以外でもjavascriptと組み合わせるなどで、より高度なアニメーションを作成することも可能です。
CSS Transformを駆使してあなたのWebサイトをリッチにしましょう。