.cube{
  position: relative;
  width: 220px;              /* 300 -> 220 */
  height: 220px;             /* 300 -> 220 */
  transform-style: preserve-3d;
  transform: rotateX(-30deg) rotateY(-30deg);
  animation: animate-rotation-cube 6s linear infinite;
}

@keyframes animate-rotation-cube {
  0%   { transform: rotateX(-30deg) rotateY(0deg); }
  100% { transform: rotateX(-30deg) rotateY(360deg); }
}

.cube div{
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

/* ---- Yüzler (4 yan) ---- */
.cube div span{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 100%);
  transform: rotateY(calc(90deg * var(--i))) translateZ(110px); /* 150 -> 110 */
  transition: transform .5s ease-in-out;                       /* 1.5s -> 0.5s */
}

/* ---- Üst / Alt ---- */
.top,
.bottom{
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255,255,255,0.6) 0, rgba(255,255,255,0) 100%);
  transition: transform .5s ease-in-out;                       /* 1.5s -> 0.5s */
}

.top{
  transform: rotateX(90deg) translateZ(110px);                  /* 150 -> 110 */
}

.bottom{
  transform: rotateX(90deg) translateZ(-110px);                 /* -150 -> -110 */
}

/* Alt yüzün ışık/gölgesi: siyah */
.bottom:after{
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0,0,0,0.9);   /* yeşil -> siyah (hafif saydam) */
  transform: translateZ(-40px);
  filter: blur(26px);
}

/* Hover'da daha hızlı ve daha sık açılıp-kapanır hissi için: daha kısa mesafe sürede gidip gelsin */
.cube:hover span{
  transform: rotateY(calc(90deg * var(--i))) rotateZ(180deg) translateZ(180px); /* 250 -> 180 */
}
.cube:hover .top{
  transform: rotateX(90deg) rotateZ(180deg) translateZ(180px);  /* 250 -> 180 */
}
.cube:hover .bottom{
  transform: rotateX(90deg) rotateZ(-180deg) translateZ(-180px);/* -250 -> -180 */
}

/* Ortak: görseller */
.cube div span,
.top,
.bottom{
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 4 yan yüz (span'ler) */
.cube > div span:nth-child(1){ background-image: url("resim6.jpeg"); } /* front */
.cube > div span:nth-child(2){ background-image: url("resim1.jpeg"); } /* right */
.cube > div span:nth-child(3){ background-image: url("resim2.jpeg"); } /* back  */
.cube > div span:nth-child(4){ background-image: url("resim3.jpeg"); } /* left  */

/* Üst–alt */
.top   { background-image: url("resim4.jpeg"); }
.bottom{ background-image: url("resim5.jpeg"); }

/* --- İSTEĞE BAĞLI: Hover'a gerek kalmadan otomatik “açılıp-kapanma” (nefes) efekti ---
.cube div span, .top, .bottom{
  animation: breathe 1.2s ease-in-out infinite alternate;
}
@keyframes breathe{
  from { transform: translateZ(var(--z,110px)); }         // yan yüzlerde rotateY(...) + translateZ(110)
  to   { transform: translateZ(var(--zOpen,180px)); }     // 180'e açıl
}
NOTE: Bu yolu kullanacaksan yan yüzler için transform'u JS ile değiştirmen veya ayrı seçicilerle yeniden yazman gerekir.