<section>
  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1605702012553-e954fbde66eb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=415&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1529619768328-e37af76c6fe5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1516016242702-4611de558fd5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1577450775949-58ec8d02cad9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=348&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1529440701349-739a457dbcdd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=389&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1531819177115-428566ccfb50?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=327&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.pexels.com/photos/10410209/pexels-photo-10410209.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.pexels.com/photos/7078523/pexels-photo-7078523.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1577579566473-0fe27da2d1f2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1477075543404-9d0a72bbccbe?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1506607541365-d0c9593de494?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1576260243040-0231b2cd4c1f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1623562628024-485d7532bb2c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=682&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1514439827219-9137a0b99245?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1532555985931-0cd8773a663c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=685&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1541537103745-ea3429c65dc4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1560307002-306085d5ca4e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
  </div>

  <div class="img-box">
    <img src="https://images.unsplash.com/photo-1534218045467-c23a3949854e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=662&q=80" alt="">
  </div>

</section>
* {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  overflow-x: hidden;
  animation: bg-change 25s infinite ease-in forwards;
  transition: all 0.25s ease-in;
  background: #fff;
}

@keyframes bg-change {
  0% {
    background: #fff;
  }

  20% {
    background: #000;
  }

  40% {
    background: #999;
  }

  60% {
    background: #fff;
  }

  80% {
    background: #000;
  }

  100% {
    background: #222;
  }
}

section {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}

.img-box {
  width: 350px;
  animation: rotate 30s infinite ease-in forwards alternate;
  transition: all 0.25s ease-in;
  margin: 30px 25px;
  box-shadow: 0 0 10px 2px steelblue;
}

@keyframes rotate {
  0% {
    transform: rotate3d(0, 0, 0, 0deg);
  }

  20% {
    transform: rotate3d(5, 4, 3, 72deg);
  }

  40% {
    transform: rotate3d(5, 4, 3, 216deg);
  }

  60% {
    transform: rotate3d(5, 4, 3, 288deg);
  }

  80% {
    transform: rotate3d(5, 4, 3, 360deg);
  }

  100% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}

.img-box img {
  width: 100%;
}
// no js here guys

// this is a simple 3d image gallery created wd by simple html and css using some animation and 3d rotate properties.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.