2017.08.17

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

こんにちは。三浦です。

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

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

Maromaro Blog

CSSで簡単アニメーション！CSS Transitionの基本をおさらいしよう

こんにちは。三浦です。先日避暑もかねて水族館に行ってきました。今回訪れた水族館では海月の水槽がライトアップされていてブルーのライトがぼんやりと明滅するのですが、それを見ていたらマウスオーバーで点滅するボタンのことを思い出しました。さて、近年古いIEのサポートがどんどん終了したことでブラウザのサポート状況を気にする機会が減ってきましたよね。そのおかげかCSSでアニメーションを利用する機会が増えてきたように思います。そこで今回はCSSに記述することで簡単にアニメーションが実現できるCSS Transitionの基本に...

CSS Transformとは

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

↓前回の記事はこちら

Maromaro Blog

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

こんにちは。三浦です。先日「鉱石キャンドル」なるものを作りました。色付けなどを工夫して作ったキャンドルを鉱石っぽくなるように砕くとできるのですが、キャンドルをカッターでガリガリ砕いて変形させていく工程がなかなか楽しかったです。さて今回はCSS Transformについて紹介させて頂きます。CSS Transformは前回紹介したCSS Transitionと組み合わせることで簡単にCSSのアニメーションを実現することができます。↓CSS Transitionについてはこちらをご覧ください。今回Transformの主要な4つの関数について記事で掘り下げようと思...

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

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

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

回転（rotate）

指定した要素を回転させるTransformプロパティの関数になります。
回転させる角度はdegという単位で指定します。degはdegree（ディグリー）の略で円周３６０度を表す数値になります。
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);
}