@keyframes autoRun3d{0%{transform:perspective(800px) rotateY(-360deg)}to{transform:perspective(800px) rotateY(0)}}@keyframes animateBrightness{10%{filter:brightness(1)}50%{filter:brightness(.1)}90%{filter:brightness(1)}}.card-3d{position:relative;height:200px;transform-style:preserve-3d;transform:perspective(800px);animation:autoRun3d 20s linear infinite;will-change:transform}.card-3d div{position:absolute;width:80px;height:112px;background-color:#c7c7c7;background-size:cover;background-position:center;border:solid 2px lightgray;border-radius:.5rem;top:50%;left:50%;transform-origin:center center;animation:animateBrightness 20s linear infinite;transition-duration:.2s;will-change:transform,filter}.card-3d:hover,.card-3d:hover div{animation-play-state:paused!important}.card-3d div:nth-child(1){transform:translate(-50%,-50%) rotateY(0) translateZ(150px);animation-delay:-0s}.card-3d div:nth-child(2){transform:translate(-50%,-50%) rotateY(36deg) translateZ(150px);animation-delay:-2s}.card-3d div:nth-child(3){transform:translate(-50%,-50%) rotateY(72deg) translateZ(150px);animation-delay:-4s}.card-3d div:nth-child(4){transform:translate(-50%,-50%) rotateY(108deg) translateZ(150px);animation-delay:-6s}.card-3d div:nth-child(5){transform:translate(-50%,-50%) rotateY(144deg) translateZ(150px);animation-delay:-8s}.card-3d div:nth-child(6){transform:translate(-50%,-50%) rotateY(180deg) translateZ(150px);animation-delay:-10s}.card-3d div:nth-child(7){transform:translate(-50%,-50%) rotateY(216deg) translateZ(150px);animation-delay:-12s}.card-3d div:nth-child(8){transform:translate(-50%,-50%) rotateY(252deg) translateZ(150px);animation-delay:-14s}.card-3d div:nth-child(9){transform:translate(-50%,-50%) rotateY(288deg) translateZ(150px);animation-delay:-16s}.card-3d div:nth-child(10){transform:translate(-50%,-50%) rotateY(324deg) translateZ(150px);animation-delay:-18s}