Spinning One Euro Coin

In this example below you will see how to do a Spinning One Euro Coin with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by adamjld, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright adamjld ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Spinning One Euro Coin</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <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>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/adamjld/spinning-one-euro-coin-jAfqg */
#euro{
  width: 150px;
  height: 150px;
  margin-left: -75px;
  margin-top: -75px;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-animation: spin 2.5s linear infinite;
          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;
  -webkit-transform: translateZ(1px);
          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;
    -webkit-transform: translateZ(10px);
            transform: translateZ(10px);
    width: 150px;
}

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

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

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

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

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

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

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

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

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

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

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

Comments