3d image carousel animation

3d-image-carousel-animation.markdown

3d image carousel animation

🐧 reference website: https://www.usebutter.com/

A Pen by Vivi Tseng on CodePen.

License.

index.html

<div class="container">
  <div class="inner">
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1603320284370-d33c0e5ff086?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDYxNDB8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1633871771924-380d6123659b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDU3ODl8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1571928002685-15aeba39a2d4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDYxNjV8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1605643362116-ccf4302f9453?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDYxNzV8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1634473117419-92371b2bf457?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDU5MTF8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1697375805257-a5220aa18c55?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDU5NzB8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1698831695020-2e94ebfdfed7?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDU5Nzl8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>
    <div class="card-wrapper">
      <img src="https://images.unsplash.com/photo-1577222960172-18c61acf6791?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE3NjIyMDYyODJ8&ixlib=rb-4.1.0&q=80&w=400" alt="">
    </div>

  </div>
</div>

style.scss

@import url('https://fonts.googleapis.com/css2?family=Aboreto&display=swap');

@mixin flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}

* {
  box-sizing: border-box;
}
html {
  font-size: 100vmax / 1600 * 100;
  @media (max-width: 992px) {
    font-size: 60px;
  }
}
body {
  min-height: 100vh;
  @include flexCenter;
  color: #ececec;
  background-color: #222;
  font-size: 0.3rem;
  font-family: "Aboreto", system-ui;
  
  perspective: 1500px;
}

.container {
  position: relative;
  width: 4rem;
  aspect-ratio: 1/1;
  
  transform-style: preserve-3d;
  transform: translate3d(0, 0, -800px);
}

.inner {
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  animation: rotate linear 30s infinite;
}

.card-wrapper {
  position: absolute;
  inset: 0;
  margin: auto;
  height: 100%;
  aspect-ratio: 9/16;
  
  transform-style: preserve-3d;
  backface-visibility: visible;
  
  $total: 8;
  $one: 360deg / $total;
  @for $i from 1 through $total {
    &:nth-child(#{$i}) {
      transform: rotateY($i * $one) translateX(150%);
    }
  }

  img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 36px;
    object-fit: cover;
    filter: grayscale(0.2);
    
    transform: rotateY(90deg);
  }
}

@keyframes rotate {
  0% {
    transform: rotateY(-50deg) rotateX(12deg) rotateY(0deg);
  }
  100% {
    transform: rotateY(-50deg) rotateX(12deg) rotateY(-360deg);
  }
}