AI（ChatGPT）を使って半自動で月5万稼ぐ？
実際にやってみて結果・・ >>

transformプロパティ(translate scale rotate)で作るCSS画像アニメーション３選

今回はtransformプロパティ(translate scale rotate)で作るCSS画像アニメーション３選(解説あり)をご紹介。シンプルかつ洗練されたデザイン。filterで美しいエフェクト。transformプロパティ(translate×rotate×scale)で画像が動く。Web制作で使える。コピペOK。HTML, CSSだけ

まずは動きを確認してみてください（これがコピペOKなのかと驚くはず）

コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのデザイン・コードはすべて完全オリジナルなのでコピペ大歓迎です。

この記事の目次
transformプロパティ(translate scale rotate)で作るCSS画像アニメーション３選

  1. 【シンプル】translate×scale×rotateで画像アニメーション
  2. 【回転・移動・拡大】translate×scale×rotate画像アニメーション
  3. 【応用】translate×scale×rotate画像アニメーション
  4. 【初心者向け】失敗しないプログラミングTIPS

 

１. 【シンプル】translate×scale×rotateで画像アニメーション

動きは下の画像のような感じになります

 

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="container">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1532699123275-37b5a57561cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
}
/* image1のスタイル調整 */
.image {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  /* flexboxで画像を中央に配置 */
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 120px;
}
.image img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: translateX(0) scale(1) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 20%;
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(100%) brightness(100%) saturate(100%) contrast(100%);
}
.image img:hover {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: translateX(50px) scale(1.5) rotateX(0) rotateZ(0deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(0%) brightness(110%) saturate(180%) contrast(110%);
}
POINT
  1. 画像にスタイルを指定していく
  2. imageクラスにflexboxを指定して画像を中央に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後にfilter : sepia(セピア) brightness(明るさ) saturate(彩度) contrast(コントラスト)を指定しエフェクトをつける
  6. hover前後でtransform : translateY(移動) scale(拡大) rotateX(回転) rotateZ(回転)の値を変化させ画像にアニメーションをつける
  7. transitionプロパティを指定することで滑らかなアニメーションを実現

２. 【回転・移動・拡大】translate×scale×rotate画像アニメーション

動きは下の画像のような感じになります

 

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="container">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1532699123275-37b5a57561cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
}
/* image1のスタイル調整 */
.image {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  /* flexboxで画像を中央に配置 */
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 120px;
}
.image img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: translateY(0) scale(1) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 20%;
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(100%) brightness(100%) saturate(100%) contrast(100%);
}
.image img:hover {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: translateY(-50px) scale(1.5) rotateX(0deg) rotateZ(360deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(0%) brightness(110%) saturate(180%) contrast(110%);
}
POINT
  1. 画像にスタイルを指定していく
  2. imageクラスにflexboxを指定して画像を中央に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後にfilter : sepia(セピア) brightness(明るさ) saturate(彩度) contrast(コントラスト)を指定しエフェクトをつける
  6. hover前後でtransform : translateY(移動) scale(拡大) rotateX(回転) rotateZ(回転)の値を変化させ画像にアニメーションをつける
  7. transitionプロパティを指定することで滑らかなアニメーションを実現

 

３. 【応用】translate×scale×rotate画像アニメーション

動きは下の画像のような感じになります

 

実際の動きはこちら

 

コードはこちら
コードを見る
  <div class="container">
    <div class="image">
      <img src="https://images.unsplash.com/photo-1532699123275-37b5a57561cf?ixlib=rb-1.2.1&auto=format&fit=crop&w=1650&q=80" style="background-size:cover;" class="img" alt="">
    </div>
  </div>

.container {
  width: 100%;
}
/* image1のスタイル調整 */
.image {
  /* 3D変形の奥行きの指定 */
  perspective: 3000px;
  /* flexboxで画像を中央に配置 */
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 120px;
}
.image img {
  /* 画像の回転角度/拡大縮小サイズを調整 */
  transform: translateZ(0) scale(1) rotateX(50deg) rotateZ(-30deg);
  /* ３D感を出すためにbox-shadowを指定 */
  box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
  /* アニメーションの速度調整 */
  transition: all 1.0s;
  width: 20%;
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(100%) brightness(100%) saturate(100%) contrast(100%);
}
.image img:hover {
  /* hover後の画像の回転角度/拡大縮小サイズを調整 */
  transform: translateZ(500px) scale(1.5) rotateX(0deg) rotateZ(3600deg);
  /* hover後の影の打ち消し */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* filterプロパティで白黒度合い・明るさ・彩度・コントラストを調整 */
  filter: sepia(0%) brightness(110%) saturate(180%) contrast(110%);
}
POINT
  1. 画像にスタイルを指定していく
  2. imageクラスにflexboxを指定して画像を中央に配置
  3. box-shadowを使って画像を3Dに変形
  4. hover時にそれらを打ち消すことで2D画像に変化
  5. hover前後にfilter : sepia(セピア) brightness(明るさ) saturate(彩度) contrast(コントラスト)を指定しエフェクトをつける
  6. hover前後でtransform : translateY(移動) scale(拡大) rotateX(回転) rotateZ(回転)の値を変化させ画像にアニメーションをつける
  7. transitionプロパティを指定することで滑らかなアニメーションを実現

【初心者向け】失敗しないプログラミングTIPS

そもそもWebデザインの基礎がわからない。。
そんなあなたには『Udemy』

ふたご

未経験からWeb制作で月５０万稼げるようになったUdemy教材３選
  1. 『未経験からプロのWebデザイナーになる！ 400レッスン以上の完全マスターコース』
  2. 『HTML/CSS/JavaScript] フロントエンドエンジニアになりたい人の Webプログラミング入門』
  3. 『超Vue.js 2 完全パック – もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)』
でもなあ、独学だと心配だしプログラミングスクールで学びたい！。かといってお金はかけたくないし。。
そんなあなたには『ProEngineer』

ふたご

完全無料で一人前のエンジニアになれるプログラミングスクール【ProEngineer】
  1. プログラミング学習＆サポートが無料！
  2. 誰もが知っている超優良企業への就職サポート付き！
  3. 学習言語：Java、PHP、HTML、CSSなど

 

 　　話だけ聞いてみる 　  

前の記事

【コピペOK】回転する繰り返しアニメーション３選【CSSだけ】

次の記事

box shadow×transform：translate(…