今回は【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション3選をご紹介。シンプルかつ洗練されたデザイン。filterプロパティでエフェクト。アニメーションで複数の画像が動く。Web制作で使える。コピペOK。HTML, CSSだけ
動きを見ていただければ使いたくなること間違いなしです!
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
Webデザインやフロントエンド初心者の方はWebデザイナー3ヶ月独学ロードマップを読んでから学習してもらえれば失敗しないと思います。
ふたご
この記事の目次
【transform rotate(360deg)×flexbox】画像が回転+伸縮するCSSアニメーション3選
1. 【縦回転】transform rotateX(360deg)×flexbox画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxとmargin: auto;でど真ん中に設置
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
- height: calcでimgの高さを詳細に指定
- flex: 1 1 30%+transform rotateで回転+ぎゅーっと伸縮するレイアウトを実現
2. 【横回転】transform rotateY(360deg)×flexbox画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxとmargin: auto;でど真ん中に設置
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
- height: calcでimgの高さを詳細に指定
- flex: 1 1 30%+transform rotateで回転+ぎゅーっと伸縮するレイアウトを実現
3. 【平面回転】transform rotateZ(360deg)×flexbox画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
コードはこちら
ここがポイント!
- flexboxとmargin: auto;でど真ん中に設置
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
- height: calcでimgの高さを詳細に指定
- flex: 1 1 30%+transform rotateで回転+ぎゅーっと伸縮するレイアウトを実現
参考
そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはこれ!
完全無料で一人前のエンジニアになれるプログラミングスクールあります