cards
Rotating 3D Carousel
라이브 미리보기새 탭에서 열기 ↗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>rotating-3d-carousel</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="inner" style="--quantity: 10;">
<div class="card" style="--index: 0;--color-card: 142, 249, 252;">
<div class="img"></div>
</div>
<div class="card" style="--index: 1;--color-card: 142, 252, 204;">
<div class="img"></div>
</div>
<div class="card" style="--index: 2;--color-card: 142, 252, 157;">
<div class="img"></div>
</div>
<div class="card" style="--index: 3;--color-card: 215, 252, 142;">
<div class="img"></div>
</div>
<div class="card" style="--index: 4;--color-card: 252, 252, 142;">
<div class="img"></div>
</div>
<div class="card" style="--index: 5;--color-card: 252, 208, 142;">
<div class="img"></div>
</div>
<div class="card" style="--index: 6;--color-card: 252, 142, 142;">
<div class="img"></div>
</div>
<div class="card" style="--index: 7;--color-card: 252, 142, 239;">
<div class="img"></div>
</div>
<div class="card" style="--index: 8;--color-card: 204, 142, 252;">
<div class="img"></div>
</div>
<div class="card" style="--index: 9;--color-card: 142, 202, 252;">
<div class="img"></div>
</div>
</div>
</div>
</body>
</html>