transformについて[html, css]

はじめに

「transformは何ができるのか」
「transformはどんな時に使うのか」
ということについて書いていきたいと思います。

transform自体を使ったことがない人も多いと思いますが、
Webデザインをしていく中で必ず目にすることになると思います。

そんなtransformについてまとめていきたいと思います。

transformについて

transformを使用することによって、デザインに移動、回転、伸縮、傾斜の効果をつけることができます。二次元的な動きだけではなく、三次元的な動きにも対応しています。

transformの種類

transformには4つの関数が用意されています。

1. translate()　「移動」
2. rotate()　「回転」
3. scale()　「伸縮」
4. skew()　「傾斜」

transformの使い方

それぞれの関数にX,Y,Z,3Dが用意されています。
translateX()のように()の前にX,Y,Z,3Dを記入することでその軸に対して関数を使用することができます。
また、translate(X,Y,Z)のように記入してもそれぞれの軸に対して関数を使用することができます。

index.html

<div class="transform">Transform<div>

style.css

.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
}

このhtml,cssに対して、transformを使用していきたいと思います。
わかりやすくするために:hover,transitionを使用していきたいと思います。
hoverはカーソルを要素に置いた時に適用されるようにする要素です。
transitionはtransformを適用するにあたり、開始から終了までの時間を決めることができます。

translate

translateは要素に移動の効果を追加することができます。

style.css

.transform{
    padding: 10px 20px;
    background: #59b1eb;
    text-align: center;
    color: #fff;
    width: 30%;
    transition: 1s;
}

.transform:hover{
    transform: translate(20px,20px)
}

.transformにtransition: 1s;を追加し
.transform:hover{ transform: translate(20px,20px) }を新たに追加しました。
動きを確認してみてください。
Ｘ軸方向に20px、Ｙ軸方向に20px動くのが確認できたかと思います。

rotate

rotateは要素に回転の効果を追加することができます。

style.css

.transform:hover{
    transform: rotateX(360deg)
}

rotateを使用する場合pxではなくdegree「度」を表す
degを使用します。
このコードの場合Ｘ軸に対して360度回転します。確認してみてください。

style.css

.transform:hover{
    transform: rotateY(360deg)
}

この場合Ｙ軸に対して回転するのが確認できるかと思います。

scale

scaleは要素に伸縮の効果を追加することができます。

style.css

.transform:hover{
    transform: scale(1.5,1.5)
}

値にはpxもdegも使用しません。
1.5と書けば要素の1.5倍、2.0と書けば要素の2倍になります。また、-2.0と書けば要素の1/2倍になります。
このコードではＸ軸、Ｙ軸共に1.5倍になるのが確認できると思います。

skew

skewは要素に傾斜を持たせることができます。
他の要素と異なり、Ｘ軸Ｙ軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

style.css

.transform:hover{
    transform: skew(30deg,30deg)
}

他の要素と異なり、Ｘ軸Ｙ軸に対してしか使用できない特徴があります。また、値にはdegを使用します。

transform-originについて

transform-originを使用することによって、要素の変化の基準点を設けることができます。

style.css

.translate:hover{
    transform: rotate(45deg);
    transform-origin: top left;
}

基準点の設定方法ですが、
-　絶対指定（px）
-　相対指定（%）
-　位置指定（top, center,left等）

の3つがあります。
ざっくりで良いなら位置指定、細かく決めたいなら絶対指定、相対指定を使用するという風に分けたら良いと思います。

まとめ

transformはマスターするとWebデザインの幅がとても広がります。
基礎的な使用方法でも十分幅が広まります。
ぜひマスターしましょう。