ぷるんと回転するアニメーションの実装(写経して改良) - CSS
ぷるんと回転するアニメーションを写経して、改良してみた
See the Pen ぷるんと回転 by tamago (@tamago324) on CodePen.
- サンプルではmatrix3d()で実装されていたが、matrix()でもいいんじゃないかと思ってmatrix()で実装し直してみた
- その次に、rotateでいいんじゃないかと思って、rotateで実装
matrixで100pxっぽくなるようにしていたため、rotateの方が回転させるだけなので、楽に実装できる
matrix()関数
これはtransformプロパティの値に指定できる関数で、行列を使って2Dの変形を実現するらしい
基準はmatrix(1, 0, 0, 1, 0, 0)となっている。この状態では何も変形していない状態
1番目の数値は、水平方向の縮尺（a）
2番目の数値は、垂直方向の傾斜率（b）
3番目の数値は、水平方向の傾斜率（c）
4番目の数値は、垂直方向の縮尺（d）
5番目の数値は、水平方向の移動距離（e）
6番目の数値は、垂直方向の移動距離（f）
水平(x)と垂直(y)の縮尺と傾斜率と移動距離を指定するらしい
See the Pen matrix 試し by tamago (@tamago324) on CodePen.
色々やってみたけど、よくわからないから、rotate()とかscale()とかtranslate()とかでやったほうがいいかも...
matrix(a, b, c, d, e, f)はmatrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0 , e, f, 0, 1)と同じ意味らしい
