div#carousel { 
    perspective: 1200px; 
    background: #404; 
    padding-top: 10%; 
    font-size:0; 
    margin-bottom: 3rem; 
    overflow: hidden; 
  }
  figure#spinner { 
    transform-style: preserve-3d; 
    height: 300px; 
    transform-origin: 50% 50% -500px; 
    transition: 1s; 
  } 
  figure#spinner img { 
    width: 40%; max-width: 425px; 
    position: absolute; left: 30%;
    transform-origin: 50% 50% -500px;
    outline:1px solid transparent; 
  }
  figure#spinner img:nth-child(1) { transform:rotateY(0deg); 
  }
  figure#spinner img:nth-child(2) { transform: rotateY(-45deg); }
  figure#spinner img:nth-child(3) { transform: rotateY(-90deg); }
  figure#spinner img:nth-child(4) { transform: rotateY(-135deg); }
  figure#spinner img:nth-child(5){ transform: rotateY(-180deg); }
  figure#spinner img:nth-child(6){ transform: rotateY(-225deg); }
  figure#spinner img:nth-child(7){ transform: rotateY(-270deg); }
  figure#spinner img:nth-child(8){ transform: rotateY(-315deg); }
  div#carousel ~ span { 
    color: #fff; 
    margin: 5%; 
    display: inline-block; 
    text-decoration: none; 
    font-size: 2rem; 
    transition: 0.6s color; 
    position: relative; 
    margin-top: -6rem; 
    border-bottom: none; 
    line-height: 0; }
  div#carousel ~ span:hover { color: #888; cursor: pointer; }