Cara Membuat Animasi Gambar Berputar 3D

Demo
Nih Source Code nya

<style type="text/css">
@-webkit-keyframes spinner {
  from {-webkit-transform: rotateY(0deg);}
  to {-webkit-transform: rotateY(-360deg);}
}

@-ms-keyframes spinner {
  from {-ms-transform: rotateY(0deg);}
  to {-ms-transform: rotateY(-360deg);}
}

@-o-keyframes spinner {
  from {-o-transform: rotateY(0deg);}
  to {-o-transform: rotateY(-360deg);}
}

@keyframes spinner {
  from {transform: rotateY(0deg);}
  to {transform: rotateY(-360deg);}
}

@-moz-keyframes spinner {
  from {-moz-transform: rotateY(0deg);}
  to {-moz-transform: rotateY(-360deg);}
}

#stage {
  margin: 1em auto;
  -webkit-perspective: 1200px;
  -moz-perspective: 1200px;
  -ms-perspective: 1200px;
  perspective: 1200px;
}
#spinner, #spinner p {
  text-align: center;
  color: #fff;
  -webkit-animation-name: spinner;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 6s;

  -moz-animation-name: spinner;
  -moz-animation-timing-function: linear;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 6s;

  animation-name: spinner;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 6s;

  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
#spinner:hover {
  -webkit-animation-play-state: paused;
  -moz-animation-play-state: paused;
  animation-play-state: paused;
}
</style>
<center>
<div id="stage">
   <img src="https://preview.ibb.co/iTeBCm/sss.png" width="200" height="200" id="spinner">
</div></center>

Advertisement