【CSS】transformプロパティ入門

はじめに

自身がWebサイトの作成を行ったときに
CSSでサイトに動きを付けるのに役に立ったtransformプロパティについて
基本と応用のいくつかを紹介していきたいと思います。

transformプロパティについて

CSSのtransformプロパティは、要素に回転、スケール、移動、傾斜などの変形を適用するために使用できます。

基本的な活用

transformプロパティはさまざまな関数を利用することで、要素に変形を適用します。
では、いくつか基本的な関数を紹介します。

translate(x, y): 要素を水平（X軸）または垂直（Y軸）に移動させる。
scale(x, y): 要素のサイズを拡大または縮小させる。
rotate(angle): 要素を指定した角度で回転させる。
skew(angle-x, angle-y): 要素を傾斜させる。

angleについて
angleは CSS のデータ型で、度、グラード、ラジアン、周の値で表される角度の値を表します。
単位としては
deg,grad,rad,turnなどがあります。

例

CSS

.example {
  transform: translate(50px, 100px);
  }
/*要素を右に50ピクセル、下に100ピクセル移動させる。*/
.example {
  transform: scale(1.5);
  }
/*要素を1.5倍に拡大させる。*/
.example {
  transform: rotate(45deg);
  }
/*要素を45度回転させる。*/
.example {
  transform: skew(30deg, 20deg);
  }
/*要素をX軸とY軸に沿ってそれぞれ30度と20度傾ける。*/

上記の関数は組み合わせることも可能

例

CSS

.example{
  transform: translate(50px, 100px) scale(2) rotate(30deg);
  }
/*要素を右に50px、下に100px移動させ、2倍に拡大し、30度回転させる。*/

3D変形も可能

transformプロパティは、3D変形もサポートしています。
この変換は三次元ベクトルであることが特徴です。
座標は要素がそれぞれの方向にどれだけ移動するかを定義します。

translate3d(x, y, z): 要素を3D空間内で移動させる。
scale3d(x, y, z): x,y,z軸に沿って要素を拡大縮小させる。
rotateX(angle), rotateY(angle), rotateZ(angle): 要素を特定の軸周りで回転させる。

例　3D平行移動

CSS

.example{
  transform: translate3d(100px, 50px, 200px);
  }
/*要素をX軸方向に100ピクセル、Y軸方向に50ピクセル、Z軸方向に200ピクセル移動させる。*/

応用的な活用「html要素の＜button＞と組み合わせよう」

<button>にtransformプロパティを使って
インタラクティブなボタンを作成してみましょう。(疑似クラスの:hover,:activeも使用)

htmlで<button>を作成したら
基本的なボタンのスタイルを簡単に設定します。
このスタイルでは、ボタンにパディング、背景色、テキストの色、
フォントサイズを設定しています。
また、transition プロパティを使って transform の効果を滑らかにしています。

CSS

.button {
  padding: 10px 20px;
  border: none;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s;
  }

ボタンのスタイルが設定出来たら
次に、ユーザーがボタンにマウスオーバーした時の変形効果を追加してみましょう。
このコードでは、ボタンにマウスオーバーした時、ボタンを10%拡大しています。

CSS

.button:hover {
  transform: scale(1.1);
  }

さらにさらに
クリック時の変形効果も追加してみましょう。
このコードでは、ボタンがクリックされたときに、ボタンを90%の大きさに縮小します。

CSS

.button:active {
  transform: scale(0.9);
  }

これで、transformプロパティを使い、インタラクティブなボタンが完成しました。
ユーザーがボタンにマウスオーバーすると少し拡大し、
クリックすると少し縮小する効果があります。

参考

おわりに

CSSのtransformプロパティの基本から応用までを紹介させていただきました。
私自身もウェブデザインスキルの向上を目指していきたいと思います。
最後まで読んでいただきありがとうございました。