【CSS】画像の向きを変える方法とアニメーションへの活用例
記事更新日:2022-01-26

たった1行|transform:scaleX(-1)

逆を向くコード。
.rabbit {
transform: scaleX(-1)
}

マイナス1で逆向きに。
【 Point 】
scaleX(-2):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):ヨコ方向に逆向き・1倍
- scaleY(-1):タテ方向に逆向き・1倍
- scale(-1):両方向に逆向き・1倍
- scale(-1, 1):ヨコ方向に逆向き&タテはそのままで1倍
補足:数字を変えれば◯倍の指定ができる

-2は、逆方向に2倍
2は、順方向で2倍

プラスとマイナスは間違えないで。
2022-01-26
編集後記:
この記事の内容がベストではないかもしれません。