カテゴリー

キーワード

 
> 【CSS3】CSSのtransformの値...

【CSS3】CSSのtransformの値を4つ紹介【scale、translate、rotate、skew】


2015 年 7 月 16 日 投稿    view: 38074
タグ:
このエントリーをはてなブックマークに追加

transform 2D

こんにちは、WEBマーケティング部の杉尾です。

 

今回は要素を変形させるCSS3のプロパティ、transformの概要です。

 

 

transformは、2D(平面)と3D(立体)の指定ができるのですが、今回はまず2Dを紹介します。

 

 

CSS3のtransformプロパティとは?

transformとは読んで字のごとく、『変形』に関するプロパティです。

 

要素を「移動・拡大・回転・傾斜・遠近」させることができます。

 

animationプロパティや@keyframesと組み合わせることで、複雑な動きをさせることが可能になります。

 

transformの対応ブラウザ

便利な『transform』プロパティですが、各主要ブラウザの対応状況はどうでしょうか?

 

いつものように、Caniuse.comへ行きます。
今回は2Dですので、下図のような対応状況になります。

 

css3 transform 2Dのブラウザ対応状況

 

IE8はいつも通り対応していません。
また、IE9には『-ms-』のベンダープレフィックスが必要です。

 

加えて、safariとiOs Safari、古いアンドロイドブラウザ用にも『-webkit-』のベンダープレフィックスをつけてください。

 

transformの値を4つ紹介します

では、次にtransformの値を見て行きましょう。

 

大きく分けて4つの値があります。

 

scale、translate、rotate、skewです。

 

それぞれ順番に見て行きましょう。

 

1.要素の大きさを変化させるscale

写真を動かしてみましょう。

 

普通に動かしただけではわかりづらいので、動きを確認しやすいように前回までに紹介した『animation』プロパティも使ってリピートさせます。

 

transform:scale();

scale()はX軸とY軸を同時に指定しています。

夏祭りの花火

 

HTML

<div class="hanabi">
    <img src="images/hanabi.jpg" alt="夏祭りの花火">
</div>

 

CSS

.hanabi img {
    -webkit-animation:animation-hanabi 3s infinite linear;
    animation:animation-hanabi 3s infinite linear;
}
@keyframes animation-hanabi {
    
    from{
        -ms-transform:scale(1,1);
        -webkit-transform:scale(1,1);
        transform:scale(1,1);
    }
    to{
        -ms-transform:scale(1.2,1.2);
        -webkit-transform:scale(1.2,1.2);
        transform:scale(1.2,1.2);
    }
}

 

transform:scaleX();で横幅だけ変化

 

夏祭りの花火

 

※CSSのみ記述。

CSS

.hanabi2 img {
    -webkit-animation:animation-hanabi2 2s infinite linear;
    animation:animation-hanabi2 2s infinite linear;
}
@keyframes animation-hanabi2 {
    
    from{
        -ms-transform:scaleX(1);
        -webkit-transform:scaleX(1);
        transform:scaleX(1);
    }
    to{
        -ms-transform:scaleX(1.2);
        -webkit-transform:scaleX(1.2);
        transform:scaleX(1.2);
    }
}

 

transform:scaleY();で縦幅だけ変化

 

夏祭りの花火

 

※CSSのみ記述。

CSS

.hanabi3 img {
    -webkit-animation:animation-hanabi3 2s infinite linear;
    animation:animation-hanabi3 2s infinite linear;
}
@keyframes animation-hanabi3 {
    
    from{
        -ms-transform:scaleY(1);
        -webkit-transform:scaleY(1);
        transform:scaleY(1);
    }
    to{
        -ms-transform:scaleY(1.2);
        -webkit-transform:scaleY(1.2);
        transform:scaleY(1.2);
    }
}

 

2.要素を移動させるtranslate

次に、移動に関するtransformの値です。

 

transform:translate();

 

translate()はX軸とY軸を同時に指定しています。

夏祭りの花火2

 

HTML

<div class="hanabi4">
    <img src="images/hanabi2.jpg" alt="夏祭りの花火2">
</div>    

CSS

.hanabi4 img {
    -webkit-animation:animation-hanabi4 2s infinite linear;
    animation:animation-hanabi4 2s infinite linear;
}
@keyframes animation-hanabi4 {
    
    from{
        -ms-transform:translate(0,0);
        -webkit-transform:translate(0,0);
        transform:translate(0,0);
    }
    to{
        -ms-transform:translate(30px,30px);
        -webkit-transform:translate(30px,30px);
        transform:translate(30px,30px);
    }
}

 

transform:translateX();

X軸のみの移動も可能です。

夏祭りの花火2

 

※CSSのみ記述。

CSS

.hanabi5 img {
    -webkit-animation:animation-hanabi5 2s infinite linear;
    animation:animation-hanabi5 2s infinite linear;
}
@keyframes animation-hanabi5 {
    
    from{
        -ms-transform:translateX(0);
        -webkit-transform:translateX(0);
        transform:translateX(0);
    }
    to{
        -ms-transform:translateX(30px);
        -webkit-transform:translateX(30px);
        transform:translateX(30px);
    }
}

 

transform:translateY();

Y軸のみの移動も可能です。

夏祭りの花火2

 

※CSSのみ記述。

CSS

.hanabi6 img {
    -webkit-animation:animation-hanabi6 2s infinite linear;
    animation:animation-hanabi6 2s infinite linear;
}
@keyframes animation-hanabi6 {
    
    from{
        -ms-transform:translateY(0);
        -webkit-transform:translateY(0);
        transform:translateY(0);
    }
    to{
        -ms-transform:translateY(30px);
        -webkit-transform:translateY(30px);
        transform:translateY(30px);
    }
}

 

3.要素を回転させるrotate

要素を回転させます。
アニメーションを使わない場合は、要素の角度を変更するという方が正しいかもしれません。

 

transform:rotate();

rotate()はX軸とY軸を同時に指定しています。

夏祭りの花火3

 

HTML

<div class="hanabi7">
    <img src="images/hanabi3.jpg" alt="夏祭りの花火3">
</div>    

CSS

.hanabi7 img {
    -webkit-animation:animation-hanabi7 2s infinite linear;
    animation:animation-hanabi7 2s infinite linear;
}
@keyframes animation-hanabi7 {
    
    from{
        -ms-transform:rotate(0deg);
        -webkit-transform:rotate(0deg);
        transform:rotate(0deg);
    }
    to{
        -ms-transform:rotate(360deg);
        -webkit-transform:rotate(360deg);
        transform:rotate(360deg);
    }
}

 

transform:rotateX();

X軸だけ回転。

夏祭りの花火3

 

※CSSのみ記述

CSS

.hanabi8 img {
    -webkit-animation:animation-hanabi8 2s infinite linear;
    animation:animation-hanabi8 2s infinite linear;
}
@keyframes animation-hanabi8 {
    
    from{
        -ms-transform:rotateX(0deg);
        -webkit-transform:rotateX(0deg);
        transform:rotateX(0deg);
    }
    to{
        -ms-transform:rotateX(360deg);
        -webkit-transform:rotateX(360deg);
        transform:rotateX(360deg);
    }
}

 

transform:rotateY();

Y軸だけを回転させます。

夏祭りの花火3

 

※CSSのみ記述

CSS

.hanabi9 img {
    -webkit-animation:animation-hanabi9 2s infinite linear;
    animation:animation-hanabi9 2s infinite linear;
}
@keyframes animation-hanabi9 {
    
    from{
        -ms-transform:rotateY(0deg);
        -webkit-transform:rotateY(0deg);
        transform:rotateY(0deg);
    }
    to{
        -ms-transform:rotateY(360deg);
        -webkit-transform:rotateY(360deg);
        transform:rotateY(360deg);
    }
}

 

4.要素をゆがませるskew

X軸とY軸を歪ませるtransformの値であるskewです。

 

transform:skew();

skew()でX軸、Y軸の両方を指定します。

夏祭りの花火

 

HTML

<div class="hanabi10">
    <img src="images/hanabi4.jpg" alt="夏祭りの花火">
</div>    

CSS

.hanabi10 img {
    -webkit-animation:animation-hanabi10 2s infinite linear;
    animation:animation-hanabi10 2s infinite linear;
}
@keyframes animation-hanabi10 {
    
    from{
        -ms-transform:skew(0,0);
        -webkit-transform:skew(0,0);
        transform:skew(0,0);
    }
    to{
        -ms-transform:skew(15deg,30deg);
        -webkit-transform:skew(15deg,30deg);
        transform:skew(15deg,30deg);
    }
}

 

transform:skewX();

X軸だけを歪ませます。

夏祭りの花火

 

※CSSのみ記述

CSS

.hanabi11 img {
    -webkit-animation:animation-hanabi11 2s infinite linear;
    animation:animation-hanabi11 2s infinite linear;
}
@keyframes animation-hanabi11 {
    
    from{
        -ms-transform:skewX(0);
        -webkit-transform:skewX(0);
        transform:skewX(0);
    }
    to{
        -ms-transform:skewX(15deg);
        -webkit-transform:skewX(15deg);
        transform:skewx(15deg);
    }
}

 

transform:skewY();

Y軸だけを歪ませます。

夏祭りの花火

 

※CSSのみ記述

CSS

.hanabi12 img {
    -webkit-animation:animation-hanabi12 2s infinite linear;
    animation:animation-hanabi12 2s infinite linear;
}
@keyframes animation-hanabi12 {
    
    from{
        -ms-transform:skewY(0);
        -webkit-transform:skewY(0);
        transform:skewY(0);
    }
    to{
        -ms-transform:skewY(30deg);
        -webkit-transform:skewY(30deg);
        transform:skewY(30deg);
    }
}

 

transformのまとめ

transformプロパティ(2D)の4つの値を紹介しました。
これを知っているだけでも、画面にかなり目立つ仕掛けを作れますね。

 

次回は更に派手な動きを作れるtransformプロパティの3Dを紹介します。

 

最後までお読みいただき、ありがとうございました。

 

 

アニメーションについてはこちらを是非、ご覧ください。

 

【CSS3】CSSのanimationで画面に動きを出そう①【概要説明】

 

【CSS3】CSSのanimationで画面に動きを出そう②【概要説明】

 

 

 

杉尾成行 顔写真

この記事を書いた人

杉尾成行

株式会社SceneLive Webマーケティング部長

ウェブマーケティングコンサルタントとして、クライアントのウェブ集客をサポートしている。
また、ウェブ制作、システム制作にも携わり、数々のサイトを手掛けている。
当ホームページ、ブログシステムも制作。

前職:ライター、小説家

ウェブマーケティングコンサルタントとしてのブログ
ウェブ参謀

個人ブログ(オリジナル小説他) ⇒ 35deFA

 


カテゴリー

タグ
この記事が気に入りましたら、是非、他の方にもシェアしてください。
このエントリーをはてなブックマークに追加
関連記事