【初心者必読】CSSのアニメーション付き画像を複数配置する方法

※当サイトには一部宣伝が含まれます。

今回はCSSのアニメーション付き画像を複数配置する方法をご紹介。簡単です。超動きます。画像一覧画面を作る際に役立ちます。
htmlとcssだけしか使っていません。
コードの説明や実際の動きも詳しくまとめてみたので自由にお使いください。

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

この記事の目次

【初心者必読】CSSのアニメーション付き画像を複数配置する方法

アニメーション動作の確認
コードの確認
このアニメーションのポイント！

１. 【初心者必読】CSSのアニメーション付き画像を複数配置する方法

まずはアニメーションの動作から確認していきましょう

アニメーション動作の確認

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

実際の動きはこちら

コードの確認

<div class="container">
  <div class="image1">
    <img src="https://source.unsplash.com/1000x800" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image2">
    <img src="https://source.unsplash.com/1000x801" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image3">
    <img src="https://source.unsplash.com/1000x802" style="background-size:cover;" class="img" alt="">
  </div>
  <div class="image4">
    <img src="https://source.unsplash.com/1000x803" style="background-size:cover;" class="img" alt="">
  </div>
</div>

.container {
width: 100%;
min-height: 100vh;
}
/* image1のスタイル調整 */
.image1 {
  /* 3D変形の奥行きの指定 */
perspective: 3000px;
width: 50%;
position: absolute;
/* 画像の位置調整 */
left: 20%;
top:40%;
/* 要素の3D指定 */
transform-style: preserve-3d;
}
.image1 img {
  /* 画像の回転・３D角度調整 */
transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
/* ３D感を出すためにbox-shadowを指定 */
box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
/* アニメーションの速度調整 */
transition: all 1.0s;
transform-style: preserve-3d;
width: 40%;
}
.image1:hover img {
  /* hover後の画像の回転・３D角度調整 */
transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, -10px, 30px);
/* hover後の影の打ち消し */
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image2のスタイル調整 */
.image2 {
  /* 3D変形の奥行きの指定 */
perspective: 3000px;
width: 50%;
position: absolute;
/* 画像の位置調整 */
left: 50%;
top:40%;
/* 要素の3D指定 */
transform-style: preserve-3d;
}
.image2 img {
  /* 画像の回転・３D角度調整 */
transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
/* ３D感を出すためにbox-shadowを指定 */
box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
/* アニメーションの速度調整 */
transition: all 1.0s;
transform-style: preserve-3d;
width: 40%;
filter: brightness(100%);
}
.image2:hover img {
  /* hover後の画像の回転・３D角度調整 */
transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, -10px, 30px);
/* hover後の影の打ち消し */
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image3のスタイル調整 */
.image3 {
  /* 3D変形の奥行きの指定 */
perspective: 3000px;
width: 50%;
position: absolute;
/* 画像の位置調整 */
left: 20%;
top:80%;
/* 要素の3D指定 */
transform-style: preserve-3d;
}
.image3 img {
  /* 画像の回転・３D角度調整 */
transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
/* ３D感を出すためにbox-shadowを指定 */
box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
/* アニメーションの速度調整 */
transition: all 1.0s;
transform-style: preserve-3d;
width: 40%;
}
.image3:hover img {
  /* hover後の画像の回転・３D角度調整 */
transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, -10px, 30px);
/* hover後の影の打ち消し */
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}
/* image4のスタイル調整 */
.image4 {
  /* 3D変形の奥行きの指定 */
perspective: 3000px;
width: 50%;
position: absolute;
/* 画像の位置調整 */
left: 50%;
top: 80%;
/* 要素の3D指定 */
transform-style: preserve-3d;
}
.image4 img {
  /* 画像の回転・３D角度調整 */
transform: rotateX(50deg) rotateZ(-30deg) translate3d(-120px, -80px, 30px);
/* ３D感を出すためにbox-shadowを指定 */
box-shadow: -20px 20px 15px 5px rgba(0,0,0,0.4);
/* アニメーションの速度調整 */
transition: all 1.0s;
transform-style: preserve-3d;
width: 40%;
}
.image4:hover img {
  /* hover後の画像の回転・３D角度調整 */
transform: rotateX(0deg) rotateZ(0deg) translate3d(-120px, -10px, 30px);
/* hover後の影の打ち消し */
box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.0);
}

ここがポイント！