いきさつ
やったことないのにやることになった…
キーワード
何が必要なのかから調べないと..
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/
最近のコメント