<div id="euro">
  <article class="back"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
    <article class="middle"></article>
  <article class="front"></article>
</div>
#euro{
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-style: preserve-3d;
  animation: spin 2.5s linear infinite;
}

.back{
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/backeuro.png");
  width: 150px;
  height: 150px;
}

.middle{
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/faceeuro.png");
  width: 150px;
  height: 150px;
  transform: translateZ(1px);
  position: absolute;
  top: 0;
}

.front{
    background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/133687/faceeuro.png");
    height: 150px;
    position: absolute;
    top: 0;
    transform: translateZ(10px);
    width: 150px;
}

.middle:nth-child(1){
  transform: translateZ(1px);
}

.middle:nth-child(2){
  transform: translateZ(2px);
}

.middle:nth-child(3){
  transform: translateZ(3px);
}

.middle:nth-child(4){
  transform: translateZ(4px);
}

.middle:nth-child(5){
  transform: translateZ(5px);
}

.middle:nth-child(6){
  transform: translateZ(6px);
}

.middle:nth-child(7){
  transform: translateZ(7px);
}

.middle:nth-child(8){
  transform: translateZ(8px);
}

.middle:nth-child(9){
  transform: translateZ(9px);
}

@keyframes spin{
  0% {transform: rotateY(0deg);}
  100% {transform: rotateY(360deg);}
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.