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

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

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

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

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

 

1. 【シンプル】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);
  /* 3D感を出すために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プロパティを指定することで滑らかなアニメーションを実現

2. 【回転・移動・拡大】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);
  /* 3D感を出すために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プロパティを指定することで滑らかなアニメーションを実現

 

3. 【応用】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);
  /* 3D感を出すために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』

ふたご


でもなあ、独学だと心配だしプログラミングスクールで学びたい!。かといってお金はかけたくないし。。
そんなあなたにはProEngineer

ふたご

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

 

   話だけ聞いてみる