【CSS】画像の向きを変える方法とアニメーションへの活用例
記事更新日:2022-01-26
![サムネイル](https://tsukiusagi.biz/wp-content/uploads/2022/01/css.png)
たった1行|transform:scaleX(-1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
逆を向くコード。
.rabbit {
transform: scaleX(-1)
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3-2.png?resize=150%2C150&ssl=1)
マイナス1で逆向きに。
【 Point 】
scaleX(-2):2倍の大きさで向きが変わる
そもそもscaleって何?
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
X軸・Y軸で大きさを変えられる。
詳しくはMDNで。
transform: scale で、サイズと向きが変幻自在
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit-scale2.png?resize=768%2C650&ssl=1)
アニメーションに応用してみよう
汽車をアニメーションさせてみる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/train.png?resize=512%2C342&ssl=1)
まずは translateXで、横移動
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
戻るときは、そのままバック。
ここをクリックしてコードを見る
.train {
animation: train-move 5s infinite alternate;
}
@keyframes train-move {
0% {
transform: translateX(-200px);
}
100% {
transform: translateX(200px);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/train-yoko.gif?resize=818%2C174&ssl=1)
scaleXで、戻るときにクルッと向きを変える
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
戻るときに、クルッとターン。
ここをクリックしてコードを見る
.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);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/train-scale.gif?resize=818%2C174&ssl=1)
徐々に向きを変える
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
大きなターン。
ここをクリックしてコードを見る
.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);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/train-scale2.gif?resize=818%2C174&ssl=1)
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3-1.png?resize=150%2C150&ssl=1)
汽車は変だけど、ウサギならいいでしょ。
ここをクリックしてコードを見る
.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);
}
}
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/usagi-scale.gif?resize=818%2C174&ssl=1)
まとめ
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
scale のおかげで姿勢を変えられる。
transform: scale で、向きとサイズを操作する
- scaleX(-1):ヨコ方向に逆向き・1倍
- scaleY(-1):タテ方向に逆向き・1倍
- scale(-1):両方向に逆向き・1倍
- scale(-1, 1):ヨコ方向に逆向き&タテはそのままで1倍
補足:数字を変えれば◯倍の指定ができる
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit3.png?resize=150%2C150&ssl=1)
-2は、逆方向に2倍
2は、順方向で2倍
![](https://i0.wp.com/tsukiusagi.biz/wp-content/uploads/2022/01/rabbit1-1.png?resize=150%2C150&ssl=1)
プラスとマイナスは間違えないで。
2022-01-26
編集後記:
この記事の内容がベストではないかもしれません。