@import url("https://fonts.googleapis.com/css2?family=Grape+Nuts&display=swap");

.gallery {
  display: grid;
  width: 100%;
  max-width: 1002px;
  grid-gap: 50px;
  grid-template-columns: repeat(auto-fit, 300px);
  justify-content: center;
  margin: 50px auto;
  font-family: "Grape Nuts", cursive;
}

.imageRoll {
  position: relative;
  width: 300px;
  height: 300px;
  background-color: #fff;
  box-shadow: 1em 0.5em 2em #1234, 0 0 5em #1234 inset;
  perspective: 900px;
  margin: 0 auto;
}

.imageRoll i {
  position: absolute;
  left: calc(100% - 1px);
  width: 6px;
  height: 100%;
  transform-style: preserve-3d;
  transform-origin: left;
  transition: transform 0.6s var(--delay, 0s) ease-in-out;
  background-image: linear-gradient(#0003, #0000 5% 95%, #0003), var(--imageUrl, "");
  background-position-x: calc(var(--bpx, 0) + 1px);
  background-size: 300px 300px;
}

.imageRoll > i { left: 0; width: 5px; }

.imageRoll:hover i {
  transform: rotateY(var(--angle, 0deg)) skewY(var(--skew, 0deg));
  transition-delay: var(--delay2, 0s);
}

/* بخش محاسبات (فشرده شده برای جلوگیری از طولانی شدن) */
.imageRoll > i { --bpx: 0px; --delay: 0s; --delay2: 0.6s; --angle: -10deg; --skew: 0deg; }
.imageRoll > i > i { --bpx: -5px; --delay: 0.01s; --delay2: 0.59s; --angle: -10.1deg; --skew: -0.1deg; }
.imageRoll > i > i > i { --bpx: -10px; --delay: 0.02s; --delay2: 0.58s; --angle: -10.2deg; --skew: -0.2deg; }
.imageRoll > i > i > i > i { --bpx: -15px; --delay: 0.03s; --delay2: 0.57s; --angle: -10.3deg; --skew: -0.3deg; }
/* ... این الگو تا ۶۰ مرحله ادامه دارد. لطفا کدهای CSS بخش محاسبات را از کد اولیه خود کپی و اینجا قرار دهید ... */

.imageRoll > figcaption {
  position: absolute;
  top: 0; left: 0;
  text-align: center;
  padding-top: 2em;
  padding-inline: 100px 25px;
  z-index: -1;
  font-size: 32px;
  width: 100%;
  height: 100%;
}
.imageRoll > figcaption strong { display: block; }