box-shadowとhoverで3D画像に動きをつけるCSSアニメーション3選!

今回はbox-shadowを使った3Dっぽい画像にhoverアニメーションをつけて実装してみました。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

こちらのアニメーション/エフェクトのコードはすべて完全オリジナルなのでコピペ大歓迎です。

 

 

1. 3D画像が2D画像に変化するシンプルなhoverアニメーション

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

実際の動きはこちら
コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
}
.image {
  perspective: 3000px;
  /* 3D変形の奥行きの指定 */
  width: 70%;
  position: absolute;
  transform: translate(18%, 25%);
  /* 画像の位置調整 */
  transform-style: preserve-3d;
  /* 要素の3D指定 */
}
.image img {
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
   /* 画像の角度調整 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
  transition: all 1.0s;
   /* 動きの速度調整 */
  transform-style: preserve-3d;
  width: 70%;
   /* 画像の大きさ調整 */
}
.image:hover img {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, 0px, 0px);
  /* hover後の画像の角度調整 */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* hover後の影の打ち消し */
}
ここがポイント!
  1. transfromプロパティとbox-shadowを使って画像を3Dに変形
  2. hover時にそれらを打ち消すことで2D画像に変化
  3. transitionプロパティを指定することで滑らかなアニメーションを実現

 

2. 画像のサイズが拡大するhoverアニメーション 

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

実際の動きはこちら
コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
}
.image {
  perspective: 3000px;
  /* 3D変形の奥行きの指定 */
  width: 50%;
  position: absolute;
  transform: translate(43%, 45%);
  /* 画像の位置調整 */
  transform-style: preserve-3d;
  /* 要素の3D指定 */
}
.image img {
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
   /* 画像の角度調整 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
  transition: all 1.0s;
   /* 動きの速度調整 */
  transform-style: preserve-3d;
  width: 50%;
   /* 画像の大きさ調整 */
}
.image:hover img {
  transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, -100px, 0px);
  /* hover後の画像の角度調整 */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* hover後の影の打ち消し */
  width: 100%;
  /* hover後の画像の大きさを調整(今回は2倍に変形するように調整) */
}
ここがポイント!
  1. transfromプロパティとbox-shadowを使って画像を3Dに変形
  2. hover時にそれらを打ち消す+widthを2倍に設定することで拡大しながら2D画像に変化
  3. transitionプロパティを指定することで滑らかなアニメーションを実現

 

3. 回転しながら画像のサイズが拡大するhoverアニメーション

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

実際の動きはこちら
コードを見る
<div class="container">
  <div class="image">
    <img src="https://images.unsplash.com/photo-1551607117-21fa129a211d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1720&q=80" style="background-size:cover;" class="img" alt="">
  </div>
</div>
* {
  padding: 0;
  margin: 0;
}
.container {
  width: 100%;
  min-height: 100vh;
}
.image {
  perspective: 3000px;
  /* 3D変形の奥行きの指定 */
  width: 50%;
  position: absolute;
  transform: translate(43%, 65%);
  /* 画像の位置調整 */
  transform-style: preserve-3d;
  /* 要素の3D指定 */
}
.image img {
  transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
   /* 画像の角度調整 */
  box-shadow: -30px 30px 15px 5px rgba(0,0,0,0.4);
  transition: all 1.0s;
   /* 動きの速度調整 */
  transform-style: preserve-3d;
  width: 50%;
   /* 画像の大きさ調整 */
}
.image:hover img {
  transform: rotateX(0deg) rotateZ(360deg) translate3d(-120px, -150px, 100px);
  /* hover後の画像の角度調整(今回はrotateZを360degに指定し回転させる) */
  box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
  /* hover後の影の打ち消し */
  width: 80%;
  /* hover後の画像の大きさを調整(今回は適度に拡大するように調整) */
}
ここがポイント!
  1. transfromプロパティとbox-shadowを使って画像を3Dに変形
  2. hover時にbox-shadowを打ち消す+rotateZ:360degに指定することで回転しながら2D画像に変化
  3. transitionプロパティを指定することで滑らかなアニメーションを実現

参考

そもそもWebデザインの基礎がわからない。。
そんなあなたにはこれ!

ふたご


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

ふたご

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

 

   話だけ聞いてみる