CSSアニメーション④~transformプロパティ編~

テキスト目次 > HTMLとCSSの応用 >　CSSアニメーション④~transformプロパティ編~

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

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

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

目次

transformプロパティとは

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

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

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

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

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

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

translateの使い方

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

translateX()を使用した例

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

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

translateY()を使用した例

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

translateZ()を使用した例

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

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

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

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

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

rotateの使い方

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

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

360degは360度となります。

scaleの使い方

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

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

skewの使い方

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

<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>
HTML
.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);
}
CSS

出力結果

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

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

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

チェックテスト

チェックテストを確認する

下記コードを参考に、translate-itemクラスをホバーした際に3倍に伸縮するコードを追記しdiscordで共有ください。

<div class="translate">
 <div class="translate-item">要素</div>
</div>
<style>
 .translate {
   width: 100px;
   height: 100px;
   margin: 200px auto 80px;
 }


 .translate-item {
   width: 100px;
   height: 100px;
   line-height: 100px;
   background: #ffbb1e;
   color: #fff;
   text-align: center;
   transition: 0.5s;
   cursor: pointer;
   font-weight: bold;
 }
</style>
HTML

お問い合わせ

相談などお気軽にお問い合わせ下さい

問い合わせフォーム
TOP