いきさつ

やったことないのにやることになった…

キーワード

何が必要なのかから調べないと..

transformプロパティ

とりあえずこれ使います。 こんなかんじ..

transform: rotate(25deg);

値の部分(rotateのところね)をいろいろいじります…

translate

多分一番有名なやつ。 単純に移動させます。

skew

傾ける

rotate

回転させる

matrix

すべてのtransformプロパティを一括で書くことができるショートハンドです。 ただし複雑な値になるので自力で書くのはおすすめできません。

実際にはこういうツール使うことで書くことでできます。 https://meyerweb.com/eric/tools/matrix/

Multiple values

transformは複数の値を持たせることができます。 こんなかんじ…

.element {
  width: 20px;
  height: 20px;
  transform: scale(20) skew(-20deg);
}

3Dについて

すべてのtransformの値は3D…つまりz軸の値を持つことできます。 最後に3dをつけることで有効になります。 こんなかんじ

translate3d(x, y, z)
// これでもいい。
translateZ(z)

注意！！！！！3Dは親にperspectiveを1以上にしないと適用されません。

初期値(=none)だと奥行き(z軸)は適用されないので注意！！

perspective

奥行き(目線)を定義することができます。 分かりづらいです…

ちょっとまって。

keyframeとかでもっと動き方について細かい設定したいんだけどできる..?

できまぁす！！

こんなかんじ

.target-element {
  animation: move 10s steps(10) infinite alternate;
}
@keyframes move {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

steps(n)とは？

移動時に1から１００にぬるぬる動いていくのではなく 100/nのところに1コマずつ描画するようなアニメーションの仕方になります。 パラパラ漫画みたいなかんじ。

参考

https://css-tricks.com/almanac/properties/t/transform/ https://css-tricks.com/snippets/css/keyframe-animation-syntax/