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

2017.08.16

miura

miura

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

Web制作

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

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

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

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

Web制作

あなたにオススメの記事

  1. 2017.08.17

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

  2. 2017.07.10

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

  3. 2017.09.22

    Edgeでマウスオーバーしたボタンのアイコンがちらつく現象の解決方法

  4. 2017.01.16

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その2 クラスの追加と...

  5. 2016.01.25

    CSSセレクタを使いこなしてスマートにコーディングする

  6. 2018.05.01

    CSSで上下中央揃えにする4つの方法

  7. 2019.03.11

    【CSS】インライン要素にアニメーションで下線を引くホバーアクション2種類

  8. 2017.02.20

    脱jQuery初心者！コピペに頼らないプログラミング入門講座～その3 if文を使った条...

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