Beautiful 3D-animation

by avgustre

HTML

<h1>Beautiful 3D-animation</h1>
<div id="container">
  <div id="butterfly">
    <div id="leftwing"></div>
    <div id="rightwing"></div>
    </div>
  </div>

CSS

body {
  margin: 0;
  text-align: center;
  background: url(https://html5book.ru/wp-content/uploads/2015/06/background32.jpg);
}
h1 {
  font-family: 'Cinzel', serif;
  color: #D72F2C;
  text-shadow: 2px 2px 0 #D9D9D9, 4px 4px 0 white;
}
#container {
  background: url(https://html5book.ru/wp-content/uploads/2015/07/grass.png);
  background-repeat: no-repeat;
  -webkit-perspective: 600px;
  -webkit-perspective-origin: 50% 0%;
  perspective: 600px;
  perspective-origin: 50% 0%; 
  width: 660px;
  height: 100%;
  margin: 50px auto 0;
}
#butterfly {
  position: relative;
  width: 350px;
  height: 312px;
  -webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
  -ms-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
  transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5);
  -webkit-transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  transform-origin: 100% 0%;
  -webkit-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: butterfly 5s linear infinite;
  animation: butterfly 5s linear infinite;
}
#leftwing {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(https://html5book.ru/wp-content/uploads/2015/06/butterfly.png);
  background-repeat: no-repeat;
  -webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  -ms-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  -webkit-transform-origin: inherit;
  -ms-transform-origin: inherit;
  transform-origin: inherit;
  -webkit-animation: leftwing 0.2s linear infinite;
  animation: leftwing 0.2s linear infinite;
}
#rightwing {
  position: absolute;
  left: 175px;
  top: 0px;
  width: 200px;
  height: 312px;
  background-image: url(https://html5book.ru/wp-content/uploads/2015/06/butterfly.png);
  background-repeat: no-repeat;
  -webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
 ...