3d carousel

by nkovacs

HTML

<div class="container">
<div class="carousel">
  <figure id="f1">1</figure>
  <figure id="f2">2</figure>
  <figure id="f3">3</figure>
  <figure id="f7">7</figure>
  <figure id="f8">8</figure>
</div>
</div>

CSS

body {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  -webkit-text-size-adjust: none;
  color: #333;
  max-width: 720px;
  margin: 0 auto;
  padding: 10px;
}

figure {
  margin: 0;
}

.container {
  width: 210px;
  height: 140px;
  position: relative;
  margin: 200px auto 40px;
  border: 1px solid #ccc;
  perspective: 1100px;
}

.carousel {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transform: rotateX(45deg);
  transition: transform 1s;
}

.carousel figure {
  display: block;
  position: absolute;
  width: 186px;
  height: 116px;
  left: 10px;
  top: 10px;
  border: 2px solid black;
  line-height: 116px;
  font-size: 80px;
  font-weight: bold;
  color: white;
  text-align: center;
  transition: transform 1s;
  background-color: rgba(255, 0, 0, 0.8);
  backface-visibility: hidden;
}

#f1 {
  transform: rotateX(0deg) translateZ(169px);
}

#f2 {
  transform: rotateX(45deg) translateZ(169px)
}

#f3 {
  transform: rotateX(90deg) translateZ(169px)
}

#f4 {
  transform: rotateX(135deg) translateZ(169px)
}

#f5 {
  transform: rotateX(180deg) translateZ(169px)
}

#f6 {
  transform: rotateX(225deg) translateZ(169px)
}

#f7 {
  transform: rotateX(270deg) translateZ(169px)
}

#f8 {
  transform: rotateX(315deg) translateZ(169px)
}