【CSS】画像の向きを変える方法とアニメーションへの活用例
記事更新日：2022-01-26
たった１行｜transform:scaleX(-1)
逆を向くコード。
.rabbit {
transform: scaleX(-1)
}
マイナス１で逆向きに。
【 Point 】
scaleX(-2)：２倍の大きさで向きが変わる
そもそもscaleって何？
X軸・Y軸で大きさを変えられる。
詳しくはMDNで。
transform: scale で、サイズと向きが変幻自在
アニメーションに応用してみよう
汽車をアニメーションさせてみる
まずは translateXで、横移動
戻るときは、そのままバック。
ここをクリックしてコードを見る
.train {
animation: train-move 5s infinite alternate;
}
@keyframes train-move {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(200px);
}
}
scaleXで、戻るときにクルッと向きを変える
戻るときに、クルッとターン。
ここをクリックしてコードを見る
.train {
animation: train-turn 5s infinite;
}
@keyframes train-turn {
0% {
transform: scaleX(1) translateX(200px);
}
40% {
transform: scaleX(1);
}
50% {
transform: scaleX(-1) translateX(-200px);
}
90% {
transform: scaleX(-1);
}
100% {
transform: scaleX(1) translateX(200px);
}
}
徐々に向きを変える
大きなターン。
ここをクリックしてコードを見る
.train {
animation: train-scale 5s infinite;
}
@keyframes train-scale {
0% {
transform: scaleX(1) translateX(200px);
}
50% {
transform: scaleX(-1) translateX(-200px);
}
100% {
transform: scaleX(1) translateX(200px);
}
}
汽車は変だけど、ウサギならいいでしょ。
ここをクリックしてコードを見る
.train {
animation: rabbit-scale 5s infinite;
}
@keyframes rabbit-scale {
0% {
transform: scaleX(1) translateX(-200px);
}
50% {
transform: scaleX(-1) translateX(200px) translateY(-20px) rotate(45deg);
}
100% {
transform: scaleX(1) translateX(-200px);
}
}
まとめ
scale のおかげで姿勢を変えられる。
transform: scale で、向きとサイズを操作する
- scaleX(-1)：ヨコ方向に逆向き･１倍
- scaleY(-1)：タテ方向に逆向き･１倍
- scale(-1)：両方向に逆向き･１倍
- scale(-1, 1)：ヨコ方向に逆向き＆タテはそのままで１倍
補足：数字を変えれば◯倍の指定ができる
-2は、逆方向に２倍
2は、順方向で２倍
プラスとマイナスは間違えないで。
2022-01-26
編集後記：
この記事の内容がベストではないかもしれません。