Minimal 3D Perspective Carousel with jQuery and CSS3 - 3D Carousel

A super light (~2kb) jQuery plugin to create a cover-flow style flux 3D carousel using CSS3 transform, transition and perspective.

See also:

• jQuery Carousel Image Gallery with Cover-flow Effect - jqcarousel
• 3D Cover Flow-Style Image Carousel Plugin with jQuery - Cloud 9 Carousel
• Cover-flow Effect with Image Reflection Effect Using jQuery and jQuery UI - qpcoverflow
• Responsive Image Cover Flow Plugin with jQuery and CSS3 - flipster
• 3D Rotating Carousel Plugin with jQuery and CSS3 - Circular Carousel

How to use it:

1. Put jQuery library and the jQuery 3D carousel plugin into your web page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/3dcarousel.js"></script>

2. Add carousel items into Html5 figure elements.

<div id="perspective">
  <div id="carousel">
    <figure>1</figure>
    <figure>2</figure>
    <figure>3</figure>
    <figure>4</figure>
    <figure>5</figure>
    <figure>6</figure>
    <figure>7</figure>
    <figure>8</figure>
    <figure>9</figure>
    <figure>10</figure>
  </div>
</div>

3. Add the following CSS snippet into your web page.

#perspective {
  margin: 0 auto;
  margin-top: 80px;
  width: 210px;
  height: 140px;
  position: relative;
  -webkit-perspective: 1100px;
  perspective: 1100px;
}

#carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -webkit-transform: rotateY(0deg) translateZ(-288px);
}

#carousel figure {
  display: block;
  position: absolute;
  background: #2ecc71;
  width: 186px;
  height: 116px;
  opacity: 0.6;
  margin: 12px;
  color: #fff;
  cursor: pointer;
  -webkit-transition: opacity 1s, -webkit-transform 1s;
  -moz-transition: opacity 1s, -moz-transform 1s;
  -o-transition: opacity 1s, -o-transform 1s;
  transition: opacity 1s, transform 1s;
}

4. Call the plugin to initialize the 3D carousel.

$('#carousel').carousel3d();

---

This awesome jQuery plugin is developed by dcoulter45. For more Advanced Usages, please check the demo page or visit the official website.