HTML,CSSだけで作れる画像アニメーションないかな?という方向けに完全オリジナルの画像アニメーションを作ってみました
ふたご
今回はtransform scale×rotateを使って『HTML,CSSだけでここまで作れる』CSS画像回転アニメーションをご紹介。transformプロパティ(transform:scale×rotate)で画像サイズが拡大+回転します。HTML, CSSだけ。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。
こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。
まずは動きを確認してみてください(これがコピペOKなのかと驚くはず)
この記事の目次
transform scale×rotateでCSS画像回転アニメーション3選【HTML,CSSだけでここまで作れる】
※突然ですが超オトクな『無料プレゼント』のお知らせです・・
今から3日以内に『転職実績No. 1のプログラミングスクール DMM WEBCAMP』へ無料カウンセリング申込&参加された方のみ限定でもれなく【Amazonギフト券1,000円分】をGETできるキャンペーン
完全オンラインレッスンで個別メンター付き。1月中なら期間限定で5万円のキャッシュバックも
目次
1. 【X軸で動く】transform:scaleX×rotateXで画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
動画プレーヤー
00:00
00:00
コードはこちら
POINT
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transform:scale × rotateでhoverした画像サイズを拡大・回転
- filter:saturate(彩度) brightness(明るさ) contrast(コントラスト)を指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
2. 【Y軸で動く】transform:scaleY×rotateYで画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
動画プレーヤー
00:00
00:00
コードはこちら
POINT
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transform:scale × rotateでhoverした画像サイズを拡大・回転
- filter:saturate(彩度) brightness(明るさ) contrast(コントラスト)を指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
3. 【Z軸で動く】transform:scale×rotateZで画像アニメーション
動きは下の画像のような感じになります
実際の動きはこちら
動画プレーヤー
00:00
00:00
コードはこちら
POINT
- overflow: hiddenで枠に収まらないサイズの要素は隠す
- box-shadowで奥行きをつけて立体感を演出
- object-fit: coverで画像が伸縮せずに滑らかに表示されるように指定
- transform:scale × rotateでhoverした画像サイズを拡大・回転
- filter:saturate(彩度) brightness(明るさ) contrast(コントラスト)を指定
- transitionで開始から終了までの十分な時間を設定し滑らかなアニメーションを実現
【初心者向け】失敗しないプログラミングTIPS
そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』
未経験からWeb制作で月50万稼げるようになったUdemy教材3選
でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたには『ProEngineer』
完全無料で一人前のエンジニアになれるプログラミングスクール【ProEngineer】