Pure CSS3 3D Cover Flow Effect

A CSS3 transform and transition based image 3D  hover flip effect that replicates the familiar ‘cover flow’ effect. Created by jackfilose.

How to use it:

Create an image showcase with a 3D cover flow effect using Html unordered list. Add class ‘highlighted’ to any item that will be highlighted on page loaded.

<ul id="menu">
  <li> <a href="#">Item 1</a> </li>
  <li> <a href="#">Item 2</a> </li>
  <li class="highlighted"> <a href="#">Item 3</a> </li>
  <li> <a href="#">Item 4</a> </li>
  <li> <a href="#">Item 5</a> </li>
  <li> <a href="#">Item 6</a> </li>
</ul>

The core CSS to style and implement the 3D cover flow effect on list items.

ul#menu {
  padding: 0;
  margin: 0;
  -moz-perspective: 780px;
  -webkit-perspective: 780px;
  perspective: 780px;
  background-color: transparent;
}
ul#menu li a {
  display: block;
  width: 100%;
  height: 100%;
}
ul#menu li {
  text-indent: -9999px;
  position: relative;
  display: inline-block;
  width: 200px;
  height: 159px;
  margin-right: -70px;
  -moz-background-size: contain;
  -webkit-background-size: contain;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 0;
  z-index: 50;
  -moz-transform: rotateY(45deg);
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
  -moz-transition: all .45s;
  -webkit-transition: all .45s;
  transition: all .45s;
  opacity: .8;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 0 30px rgba(0,0,0,0.2);
}
ul#menu li:last-child,
ul#menu li:first-child { z-index: 45; }
ul#menu li:nth-child(2),
ul#menu li:nth-child(5) { z-index: 46; }
ul#menu li:nth-child(3) { z-index: 51; }
ul#menu li.highlighted {
  -moz-transform: rotateY(0deg) scale(1.2);
  -webkit-transform: rotateY(0deg) scale(1.2);
  transform: rotateY(0deg) scale(1.2);
  z-index: 55!important;
}
ul#menu .highlighted ~ li {
  -moz-transform: rotateY(-45deg);
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}
ul#menu li:hover,
ul#menu li:first-child:hover,
ul#menu li.highlighted ~ li:hover { z-index: 60!important; }
ul#menu li:hover {
  -moz-transform: rotateY(0deg) scale(1.2);
  -webkit-transform: rotateY(0deg) scale(1.2);
  transform: rotateY(0deg) scale(1.2);
  opacity: 1;
}
ul#menu li:hover ~ li {
  -moz-transform: rotateY(-45deg);
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}
ul#menu:hover li:not(:hover) {
  -moz-transform: rotateY(45deg);
  -webkit-transform: rotateY(45deg);
  transform: rotateY(45deg);
}
ul#menu:hover li:hover ~ li {
  -moz-transform: rotateY(-45deg);
  -webkit-transform: rotateY(-45deg);
  transform: rotateY(-45deg);
}
ul#menu:not(:hover) li.highlighted { opacity: 1; }
ul#menu li:after {
  content: "";
  width: 200px;
  height: 20px;
  background: rgba(255,255,255,.5);
  position: absolute;
  bottom: -20px;
  left: 0;
  -webkit-mask-image: -webkit-gradient(linear, left 10%, left bottom, from(rgba(0,0,0,.5)), to(rgba(0,0,0,0)));
}

Add background images to the list items.

ul#menu li:nth-child(1) { background-image: url(1.jpg); }
ul#menu li:nth-child(2) { background-image: url(2.jpg); }
ul#menu li:nth-child(3) { background-image: url(3.jpg); }
ul#menu li:nth-child(4) { background-image: url(4.jpg); }
ul#menu li:nth-child(5) { background-image: url(5.jpg); }
ul#menu li:nth-child(6) { background-image: url(6.jpg); }

That’s it. Tweak and modify the CSS as you like to create your own styles.