Skip to content

Instantly share code, notes, and snippets.

@kazzohikaru
Created March 27, 2026 22:16
Show Gist options
  • Select an option

  • Save kazzohikaru/544ee16ca8c91384428bce08a28b3b70 to your computer and use it in GitHub Desktop.

Select an option

Save kazzohikaru/544ee16ca8c91384428bce08a28b3b70 to your computer and use it in GitHub Desktop.
3d image carousel animation
<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>
@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);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment