A CodePen by Chris Mounsey. CSS 3D Coverflow - ... at least, that is what I have attempted (it's notoriously difficult). It's not perfect but the cards do move in 3D space (although the active one is not centred), and they're controlled by my faithful sta

index.html

<!--- This may need to change --->
<div class="main-container">
  <div class="coverflow-container">
    <ol class="coverflow-list">
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-1">
      <li class="coverflow-item">
        <label for="cover-1">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/love-is-blind.jpg">
            <figcaption class="album-name">Love Is Blind</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-2">
      <li class="coverflow-item">
        <label for="cover-2">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/disintegration.jpg" />
            <figcaption class="album-name">Disintegration</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-3">
      <li class="coverflow-item">
        <label for="cover-3">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/dream-harder.jpg">
            <figcaption class="album-name">Dream Harder</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-4">
      <li class="coverflow-item">
        <label for="cover-4">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/wish.jpg">
            <figcaption class="album-name">Wish</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-5">
      <li class="coverflow-item">
        <label for="cover-5">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/two-five-four.jpg">
            <figcaption class="album-name">2:54</figcaption>
          </figure>
      	</label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-6">
      <li class="coverflow-item">
        <label for="cover-6">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/garbage.jpg">
            <figcaption class="album-name">Garbage</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-7">
      <li class="coverflow-item">
        <label for="cover-7">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/long-way-round.jpg">
            <figcaption class="album-name">Long Way Round</figcaption>
          </figure>
        </label>
      </li>
      <!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-8">
      <li class="coverflow-item">
        <label for="cover-8">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/homegrown.jpg">
            <figcaption class="album-name">HomeGrown</figcaption>
          </figure>
        </label>
      </li>
    	<!-- Cover item -->
      <input type="radio" name="cover-item" id="cover-9">
      <li class="coverflow-item">
        <label for="cover-9">
          <figure class="album-cover">
            <img src="http://devilskitchen.net/media/coverflow-images/casanova.jpg">
            <figcaption class="album-name">Casanova</figcaption>
          </figure>
        </label>
      </li>
    </ol>
  </div>
  <div class="controls">
      <label for="cover-1">1</label>
      <label for="cover-2">2</label>
      <label for="cover-3">3</label>
      <label for="cover-4">4</label>
      <label for="cover-5">5</label>
      <label for="cover-6">6</label>
      <label for="cover-7">7</label>
      <label for="cover-8">8</label>
    	<label for="cover-9">9</label>
    </div>
</div>

style.less

@transition-time:0.4s;

html,body {
  background:#212121;
  font-family:Helvetica, sans-serif;
  font-size:12px;
}

.main-container {
  margin:4em auto 0 auto;
  width:650px;
  .controls {
    margin:0 auto;
    padding:2em 0 0 0;
    text-align:center;
  }
}

.coverflow-container {
  box-reflect:below 0px -webkit-linear-gradient(top, rgba(0,0,0,0) 60%,rgba(0,0,0,0.1) 100%);
}

label {
	color:#999;
  display:inline-block;
  padding:10px;
  border:1px solid black;
  cursor:pointer;
  background:#252525;
  text-shadow:1px 1px 2px rgba(0,0,0,0.9);
  &:hover {
    color:#FFF;
  }
}

.coverflow-list {
  width:100%;
  .coverflow-item {
    display:inline-block;
    background:#414141;
    margin:0 -50px;
    position:relative;
    box-shadow:0 1px 8px rgba(0,0,0,0.9);
    .album-cover {
      display:block;
      height:150px;
      img {
        height:150px;
        width:150px;
        opacity:0.5;
      }
    }
    .album-name {
      text-align:center;
      display:block;
      color:#444;
    }
    label {
    	padding:0;
      border:none;
      display:block;
      text-shadow:none;
    }
  }
}
/* Now apply 3D transforms (never done this before!) */
.coverflow-list {
	-webkit-transform: perspective(900px);
  -webkit-transform-style: preserve-3d;
  -webkit-perspective-origin: 100% 30%;
  .coverflow-item {
    -webkit-transition: all @transition-time ease;
    background:#212121;
    -webkit-transform: rotateY(45deg);
  }
}

input[type="radio"] {
  display:none;
  &:checked {
    + .coverflow-item {
      -webkit-transform: rotateY( 0deg );
      margin:0 auto;
      background:#313131;
      transition:all @transition-time ease;
      img { opacity:1; }
      figcaption { color:#FFFFFF; }
      ~ .coverflow-item {
      	-webkit-transform:rotateY(-45deg);
        background:#515151;
      }
    }
  }
}

/*@keyframes cover-forward {
  0% { transform: rotateY( 45deg ); }
  50% { transform: rotateY( 0deg ) translate3d( 60px,0,0 ) scale3d(1.2,1.2,1.2); z-index:999; }
  100% { transform: rotateY( 45deg ) translate3d( 0,0,0 ) scale3d(1,1,1); }
}

@keyframes cover-return {
  0% { transform: rotateY( 45deg ); }
  100% { transform: rotateY( 0deg ) translate3d( 150px,0,0 ) scale3d(1.2,1.2,1.2); }
}*/