transformプロパティ - WEBサイト制作の勉強

CSS3のtransformプロパティを使うことで要素に2D変形、または3D変形を適用する事が出来ます。

transformプロパティでは

移動（translate）
縮尺（scale）
回転（rotate）
傾斜（skew）
遠近効果（perspective）

の5つの動きがありますが、このうち移動、縮尺、回転は良く使用するので覚えておきましょう。

縦と横の移動（translate）に関しては、positionプロパティでも同等の動きを表現出来ますが「positionプロパティ」と「transformプロパティ」の特性の違いをしっかりと理解し、効率良く使い分けましょう。

「positionプロパティ」で指定した場合はCPUが処理を行います。

「transformプロパティ」で指定した場合はGPUが処理を行います。

GPU「 Graphcs Prosessing Unit」は画像の処理が得意なので、描画をGPUで行う事でCPUの負担が軽減され、結果としてページ全体の表示も早くなります。
しかし、必要以上にGPUでの作業が増えるとかえってPC全体の処理速度が遅くなるので、「transformプロパティ」の使い過ぎにも注意が必要です。

transformとtransitionの併用

transformのみで使用する場合、変形する事はしますが、ファイルが開かれた瞬間に変形が始まって瞬時に終わってしまうので、変形している様子は解らず、変形後の結果だけが表示されてしまいます。CSS3のtransitionやanimationと併用する事でユーザーの望むタイミングで変形させましょう。

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<style>
.box {
  width: 200px;
  height: 200px;
  margin: 10px;
}
.top {
  background: #006699;
  transition: 1s;
}
.top:hover {
  transform: translate(200px,0);
}
.mid {
  background: #FF0033;
  transition: 1s;
}
.mid:hover {
  transform: rotate(360deg);
  transition: 1s;
}
.btm {
  background: #66CC33;
  transition: 1s;
}
.btm:hover {
  transform: scale(1.5);
}
</style>
</head>

<body>
<div class="box top">右に200px</div>
<div class="box mid">360度回転</div>
<div class="box btm">1.5倍に拡大</div>
</body>
</html>