Loading

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 stand-by of radio buttons.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CSS 3D Coverflow</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      html,
body {
  background: #212121;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
}
.main-container {
  margin: 4em auto 0 auto;
  width: 650px;
}
.main-container .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);
}
label:hover {
  color: #FFF;
}
.coverflow-list {
  width: 100%;
}
.coverflow-list .coverflow-item {
  display: inline-block;
  background: #414141;
  margin: 0 -50px;
  position: relative;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.coverflow-list .coverflow-item .album-cover {
  display: block;
  height: 150px;
  margin: 0;
}
.coverflow-list .coverflow-item .album-cover img {
  height: 150px;
  width: 150px;
  opacity: 0.5;
}
.coverflow-list .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #444;
}
.coverflow-list .coverflow-item 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-list .coverflow-item {
  -webkit-transition: all 0.4s ease;
  background: #212121;
  -webkit-transform: rotateY(45deg);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .coverflow-item {
  -webkit-transform: rotateY(0deg);
  margin: 0 auto;
  background: #313131;
  transition: all 0.4s ease;
}
input[type="radio"]:checked + .coverflow-item img {
  opacity: 1;
}
input[type="radio"]:checked + .coverflow-item figcaption {
  color: #FFFFFF;
}
input[type="radio"]:checked + .coverflow-item ~ .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); }
}*/

    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <!--- 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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/51psxBugNkL.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/9c0075e42d1e099c487488a168db0e41.1000x1000x1.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/3651470.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/MI0000681618.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/homepage_large.63d675da.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/garbagealbum1.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/long-way-round-2010.png">
            <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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/61b3DwIVKqL.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="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3211/0000037627_500.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>
  
  
</body>
</html>
/* Downloaded from https://ahoj.co.uk/ */
html,
body {
  background: #212121;
  font-family: Helvetica, sans-serif;
  font-size: 12px;
}
.main-container {
  margin: 4em auto 0 auto;
  width: 650px;
}
.main-container .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);
}
label:hover {
  color: #FFF;
}
.coverflow-list {
  width: 100%;
}
.coverflow-list .coverflow-item {
  display: inline-block;
  background: #414141;
  margin: 0 -50px;
  position: relative;
  box-shadow: 0 1px 8px rgba(0, 0, 0, 0.9);
}
.coverflow-list .coverflow-item .album-cover {
  display: block;
  height: 150px;
  margin: 0;
}
.coverflow-list .coverflow-item .album-cover img {
  height: 150px;
  width: 150px;
  opacity: 0.5;
}
.coverflow-list .coverflow-item .album-name {
  text-align: center;
  display: block;
  color: #444;
}
.coverflow-list .coverflow-item 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-list .coverflow-item {
  -webkit-transition: all 0.4s ease;
  background: #212121;
  -webkit-transform: rotateY(45deg);
}
input[type="radio"] {
  display: none;
}
input[type="radio"]:checked + .coverflow-item {
  -webkit-transform: rotateY(0deg);
  margin: 0 auto;
  background: #313131;
  transition: all 0.4s ease;
}
input[type="radio"]:checked + .coverflow-item img {
  opacity: 1;
}
input[type="radio"]:checked + .coverflow-item figcaption {
  color: #FFFFFF;
}
input[type="radio"]:checked + .coverflow-item ~ .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); }
}*/
/* Downloaded from https://ahoj.co.uk/ */

This awesome code is write by Chris Mounsey, you can se more from this user in the personal repository