Flipping images

Animations
CSS

+ ANIMATION :

+ Description :

This animation is displaying some cards with a flipping images. I tried to use some attributes and variables in order to minimize as much as I could the code.

In order to achieve it you will find below the various codes to be used. Despite using Bricks builder, I tried to list up all the necessary steps to complete the animation to be the most universal as much as possible. Therefore I am close to what you will find in any IDE. For Bricks builder, please follow the HTML/CSS structure so you can add-up divs and give them CSS (be careful with the buttons) instead of putting it into the code element in order to avoid FOUC as the code element is loaded lastly within the page priority list.

For CSS, please note that I am considering that you are using a builder hence: no margin/padding/button reset has been applied and the font is not defined.

HTML:

<section class="flip-section">
  <div class="flip-border">
    <div class="flip-wrapper">
      <div class="flip-ctn" style="top: 0; left: 0">
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0000553.jpg"
          alt=""
          class="flip-img"
          style="--x: 0; --y: 1; transform-origin: left"
        />
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0000553.jpg"
          alt=""
          class="flip-img"
          style="--x: 1; --y: 0; transform-origin: top"
        />
      </div>
      <div class="flip-ctn" style="top: 0; right: 0">
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0002745.jpg"
          alt=""
          class="flip-img"
          style="--x: 0; --y: -1; transform-origin: right"
        />
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0002745.jpg"
          alt=""
          class="flip-img"
          style="--x: 1; --y: 0; transform-origin: top"
        />
      </div>
      <div class="flip-ctn" style="bottom: 0; left: 0">
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0012138.jpg"
          alt=""
          class="flip-img"
          style="--x: 0; --y: 1; transform-origin: left"
        />
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0012138.jpg"
          alt=""
          class="flip-img"
          style="--x: -1; --y: 0; transform-origin: bottom"
        />
      </div>
      <div class="flip-ctn" style="bottom: 0; right: 0">
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0012965.jpg"
          alt=""
          class="flip-img"
          style="--x: 0; --y: -1; transform-origin: right"
        />
        <img
          src="/Animations/Flipping square/images/agence-kokoro-R0012965.jpg"
          alt=""
          class="flip-img"
          style="--x: -1; --y: 0; transform-origin: bottom"
        />
      </div>
    </div>
  </div>
</section>

CSS:

:root {
  --size-c: 300px; /* 1 square width */
  --size-w: calc(var(--size-c) * 2 + 0.5rem);
}
.flip-section {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background-color: #202020;
}
.flip-border {
  border-radius: 1rem;
  padding: 1rem;
  box-shadow: 16px 16px 32px #171717, -16px -16px 32px #292929;
}
.flip-wrapper {
  position: relative;
  min-width: var(--size-w);
  min-height: var(--size-w);
}
.flip-ctn {
  position: absolute;
  width: var(--size-c);
  height: var(--size-c);
  padding: 1rem;
  border-radius: 1rem;
  background-color: #202020;
  perspective: 600px;
  z-index: 0;
  transition: all 1s ease-out;
  box-shadow: inset 10px 10px 20px #141414, inset -10px -10px 20px #2c2c2c;
}
.flip-ctn:before {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 7rem;
}
.flip-ctn:nth-child(1):before {
  content: "木";
}
.flip-ctn:nth-child(2):before {
  content: "煙";
}
.flip-ctn:nth-child(3):before {
  content: "影";
}
.flip-ctn:nth-child(4):before {
  content: "石";
}
.flip-ctn:after {
  content: "";
  position: absolute;
  inset: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60%;
  height: 60%;
  border: 4px solid white;
  border-radius: 50%;
  z-index: -1;
  filter: blur(2px);
  background-color: #404040;
  box-shadow: 0 0 4px 4px #999, 10px 10px 20px 10px #141414;
}

.flip-img {
  position: absolute;
  inset: 0;
  object-fit: cover;
  aspect-ratio: 1 / 1;
  width: 100%;
  opacity: 0;
  border-radius: 1rem;
  transform: rotateX(calc(-90deg * var(--x))) rotateY(calc(90deg * var(--y)));
  transition: all 1s ease-out;
}
.flip-ctn:hover .flip-img {
  transform: rotateX(0deg) rotateY(0deg);
  opacity: 1;
}
.flip-ctn:hover {
  width: var(--size-w);
  height: var(--size-w);
  z-index: 100;
}

@media screen and (max-width: 767px) {
  :root {
    --size-c: 210px;
  }
  .flip-ctn:before {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 478px) {
  :root {
    --size-c: 125px;
  }
  .flip-ctn:before {
    font-size: 2.5rem;
  }
  .flip-ctn:after {
    box-shadow: 0 0 1px 1px #999, 3px 3px 5px 5px #141414;
  }
}

 

Contact
I can adapt and install this animation on your website, contact me and let's talk about it!