transformプロパティを使うことで要素を変形させることができます。

Webサイトに動きをつけるときに使用することが多いため、Web制作には必須の知識です。

書き方さえ分かれば簡単に扱うことができますので、この記事を読んで身に着けていきましょう。

目次

transformプロパティとは

transformプロパティは、回転、伸縮、傾斜、移動などの動きを要素に指定する際に使用するCSSプロパティです。

このプロパティを使用することで3次元的な動きが可能になります。

transformプロパティの値に指定できる関数

transformプロパティには下記の関数が用意されています。

この関数を使用することで様々な効果を与えることができます。

関数名読み方実行効果
translateトランスレイト移動
rotateローテート回転
scaleスケール伸縮
skewスキュー傾斜

translateの使い方

translateを使用することで要素の移動が可能になります。

translateX()を使用した例

今回はわかりやすく、ホバーした際の動きに使用しています。

htmlのコード

<div class="translate-x">
  <div class="translate-x-item first">要素1</div>
</div>
<div class="translate-x">
  <div class="translate-x-item second">要素2</div>
</div>

cssのコード

.translate-x {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 3px solid #000;
}

.translate-x:first-of-type{
  margin-bottom: 80px;
}

.translate-x-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-x-item.first:hover {
  transform: translateX(40px);
}

.translate-x-item.second:hover {
  transform: translateX(-40px);
}

出力結果

translateX()を使用することでX軸(横軸)の移動が可能になります。

要素1には、transform: translateX(40px);を使用してプラス方向(右側)に移動します。

要素2には、transform: translateX(-40px);を使用してプラス方向(右側)に移動します。

translateY()を使用した例

htmlのコード

<div class="translate-y">
  <div class="translate-y-item first">要素1</div>
</div>
<div class="translate-y">
  <div class="translate-y-item second">要素2</div>
</div>

cssのコード

.translate-y {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 2px solid #000;
}

.translate-y:first-of-type{
  margin-bottom: 80px;
}

.translate-y-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-y-item.first:hover {
  transform: translateY(40px);
}

.translate-y-item.second:hover {
  transform: translateY(-40px);
}

出力結果

translateY()を使用することでY軸(縦軸)の移動が可能になります。

要素1には、transform: translateY(40px);を使用してプラス方向(下側)に移動します。

要素2には、transform: translateY(-40px);を使用してマイナス方向(上側)に移動します。

translateZ()を使用した例

htmlのコード

<div class="translate-z">
  <div class="translate-z-item first">要素1</div>
</div>
<div class="translate-z">
  <div class="translate-z-item second">要素2</div>
</div>

cssのコード

.translate-z {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  border: 3px solid #000;
}

.translate-z-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-z:first-of-type{
  margin-bottom: 80px;
}

.translate-z-item.first:hover {
  transform: perspective(400px)         translateZ(40px);
}

.translate-z-item.second:hover {
  transform: perspective(400px) translateZ(-40px);
}

出力結果

translateZ()を使用することでZ軸(奥行き)の移動が可能になります。

注意としては、translateZ()自体は単体では使用できないことです。

使用する際には、perspective()(パースペクティブ)も一緒に指定します。

perspective()を使用することで、ユーザー視点の位置を持たせることで、奥行きの表現が可能になります。

要素1には、transform: perspective(400px) translateZ(40px);を使用してプラス方向(近づく)に移動します。

要素2には、transform: perspective(400px) translateZ(-40px);を使用してマイナス方向(遠ざかる)に移動します。

それぞれ同時に指定することで様々な表現が可能になります。

rotateの使い方

rotateを使用することで、要素の回転が可能になります。

htmlのコード

<div class="translate-rotate">
  <div class="translate-rotate-item first">要素1</div>
</div>
<div class="translate-rotate">
  <div class="translate-rotate-item second">要素2</div>
</div>

cssのコード

.translate-rotate {
  width: 100px;
  height: 100px;
  margin: 0 auto 80px;
  border: 3px solid #000;
}

.translate-rotate-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-rotate:last-of-type {
  margin-bottom: 0;
}

.translate-rotate-item.first:hover {
  transform: rotate(360deg);
}

.translate-rotate-item.second:hover {
    transform: rotateY(360deg);
}

出力結果

要素1には、transform: rotateX(360deg);を使用してX軸(横方向)に回転します。

要素2には、transform: rotateY(360deg);を使用してY軸(縦方向)に回転します。

値に使用しているdegは「デグ」と読み、degree(度数)の略になります。

360degは360度となります。

scaleの使い方

scaleを使用することで、要素の伸縮率を変更することができます。

htmlのコード

<div class="translate-scale">
  <div class="translate-scale-item first">要素1</div>
</div>
<div class="translate-scale">
  <div class="translate-scale-item second">要素2</div>
</div>
<div class="translate-scale">
  <div class="translate-scale-item third">要素3</div>
</div>

cssのコード

.translate-scale {
  width: 100px;
  height: 100px;
  margin: 0 auto 80px;
  border: 3px solid #000;
}

.translate-scale-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-scale:last-of-type {
  margin-bottom: 0;
}

.translate-scale-item.first:hover {
  transform: scale(1.5);
}

.translate-scale-item.second:hover {
  transform: scale(0.75);
}

.translate-scale-item.third:hover {
  transform: scale(1.5,0.75);
}

出力結果

要素1には、transform: scale(1.5);を使用して1.5倍拡大しています。

要素2には、transform: scale(0.75);を使用して0.75倍縮小しています。

要素3には、transform: scale(1.5, 0.75);を使用して、横軸と縦軸の倍率を変更しています。

skewの使い方

skewを使用することで、要素の傾斜が可能になります。

htmlのコード

<div class="translate-skew">
  <div class="translate-skew-item first">要素1</div>
</div>
<div class="translate-skew">
  <div class="translate-skew-item second">要素2</div>
</div>
<div class="translate-skew">
  <div class="translate-skew-item third">要素3</div>
</div>

cssのコード

.translate-skew {
  width: 100px;
  height: 100px;
  margin: 0 auto 80px;
  border: 3px solid #000;
}

.translate-skew-item {
  width: 100px;
  height: 100px;
  line-height: 100px;
  background: #ffbb1e;
  color: #fff;
  text-align: center;
  transition: .5s;
  cursor: pointer;
  font-weight: bold;
}

.translate-skew:last-of-type {
  margin-bottom: 0;
}

.translate-skew-item.first:hover {
  transform: skewX(45deg);
}

.translate-skew-item.second:hover {
  transform: skewY(-45deg);
}

.translate-skew-item.third:hover {
  transform: skew(10deg,10deg);
}

出力結果

要素1には、transform: skewX(45deg);を使用して,横方向に傾斜をつけています。

要素2には、transform: skewY(45deg);を使用して,縦方向に傾斜をつけています。

要素3には、transform: skew(10deg,10deg);を使用して,縦横方向に傾斜をつけています。

チェックテスト

チェックテスト下記、コードにおいて、下記表示をするために必要なcssプロパティはどれかdiscordにて共有ください。

TOP