Shinchan 3D Carousel

A 3D vertical Shinchan character carousel using CSS perspective and JavaScript card transitions. Includes swipe gestures, keyboard controls, and responsive layout.

HTML


<!-- Shinchan Carousel Structure -->
<div class="carousel-track">
  <div class="card" data-index="0">
    <img src="img/shinchan.png" alt="Shinchan" />
  </div>

  <!-- Hiroshi, Misae, Himawari, Nevado, Kazama follow same structure -->

</div>

CSS


/* Carousel Card Styles */
.card {
  width: 400px;
  height: 225px;
  border-radius: 20px;
  overflow: hidden;
}

/* Active center card */
.card.center {
  transform: scale(1.1);
}

JavaScript


// Team info for Shinchan carousel
const teamMembers = [
  { name: "Shinchan", role: "Main Character" },
  { name: "Hiroshi", role: "Father" },
  // ...rest of Shinchan team
];