.carousel-container { position: relative; width: 320px; height: 420px; perspective: 1200px; } .carousel-stack { position: absolute; width: 100%; height: 100%; transform-style: preserve-3d; } .carousel-item { position: absolute; width: 100%; height: 100%; border-radius: 12px; overflow: hidden; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3); cursor: pointer; transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); } .carousel-item img { width: 100%; height: 100%; object-fit: cover; user-select: none; } .carousel-item.active { transform: translateZ(0) scale(1); opacity: 1; z-index: 10; } .carousel-item.next { transform: translate3d(40px, 20px, -150px) scale(0.9); opacity: 0.9; z-index: 9; } .carousel-item.prev { transform: translate3d(-40px, 20px, -150px) scale(0.9); opacity: 0.9; z-index: 8; } .carousel-item.hidden { transform: translateZ(-300px) scale(0.8); opacity: 0; z-index: 1; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.2); border: none; color: #fff; font-size: 18px; cursor: pointer; z-index: 20; backdrop-filter: blur(5px); transition: 0.3s; } .carousel-btn:hover { background: rgba(255, 255, 255, 0.4); } .btn-prev { left: -60px; } .btn-next { right: -60px; }