お母さんでもわかるtransformとtransition

経緯

JavaScriptを勉強していく上でtransform、transitionを知っておかないと、自分の思い描いた挙動を実現できないと思ったからです！

transform

transformには４種類の使い分けがあります。

①translate() 要素を移動させることができる

index.html

 <div class="wrapper">
    <div class="inner">
    </div>
 </div>

style.css

wrapper {
  width: 100%;
  height: 500px;
  background-color: aqua;
  padding: 20px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: brown;
  transition: 2s;/*2秒かける*/
}

.inner:hover {
  transform: translate(100px, 50px);/*X軸に100px,Y軸に50px*/
}

上記のコードは「2秒かけて、innerを右に100pxと下に50px移動させる」という意味。

ちなみにpositionと組み合わせることで、要素をど真ん中に持っていくことができる。

style.css

.wrapper {
  width: 100%;
  height: 500px;
  background-color: aqua;
  padding: 20px;
  position: relative;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: brown;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

positionの設定だけだと、「左上が基準」になるからど真ん中には来ない。
そこで、指定した要素自体を基準にしてくれるtranslateを50%で指定することで微調整をしてくれている。
(わかりずらいけど、下記画像はイメージです)

②transform:rotate()　要素を回転させる

rotateX()　→　X軸(横線)を軸として回転。
rotateY()　→　Y軸(縦線)を軸として回転。
rotateZ()　→　ど真ん中を軸として回転。=rotate()

style.css

.wrapper {
  width: 100%;
  height: 500px;
  background-color: aqua;
  padding: 20px;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: brown;
  transition: 2s;
}

.inner:hover {
  transform: rotate(45deg);
}

ホバーしたら真ん中を中心として、右に45度回転させる。

③transform:scale()　要素の拡大、縮小

④transform:skew()　歪み

③と④に関しても使い方に関しては類似しているので説明は割愛します・・・。

まとめ

私はまだ使いこなせていないですが、これらをプログラミングと組み合わせることで表現の幅が格段に上がると思います。