body {
  margin: 0;
  text-align: center;
  /*background: url(https://html5book.ru/wp-content/uploads/2015/06/background32.jpg);*/
}
#container {
  background: url(/img/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(/img/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(/img/butterfly.png);
  background-repeat: no-repeat;
  -webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0)
    rotate3d(0, 1, 0, 180deg);
  -ms-transform: rotateX(90deg) translate3d(-178px, 0, 0)
    rotate3d(0, 1, 0, 180deg);
  transform: rotateX(90deg) translate3d(-178px, 0, 0) rotate3d(0, 1, 0, 180deg);
  -webkit-transform-origin: inherit;
  -ms-transform-origin: inherit;
  transform-origin: inherit;
  -webkit-animation: rightwing 0.2s linear infinite;
  animation: rightwing 0.2s linear infinite;
}
@-webkit-keyframes butterfly {
  from {
    -webkit-transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  25% {
    -webkit-transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  50% {
    -webkit-transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  75% {
    -webkit-transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  to {
    -webkit-transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
}
@keyframes butterfly {
  from {
    transform: rotate3d(0, 1, 0, 0deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  25% {
    transform: rotate3d(0, 1, 0, -90deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  50% {
    transform: rotate3d(0, 1, 0, -180deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  75% {
    transform: rotate3d(0, 1, 0, -270deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
  to {
    transform: rotate3d(0, 1, 0, -360deg) scale3d(0.5, 0.5, 0.5)
      translate3d(-150px, 300px, 0);
  }
}
@-webkit-keyframes rightwing {
  from {
    -webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 180deg);
  }
  50% {
    -webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 100deg);
  }
  to {
    -webkit-transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 180deg);
  }
}
@keyframes rightwing {
  from {
    transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 180deg);
  }
  50% {
    transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 100deg);
  }
  to {
    transform: rotateX(90deg) translate3d(-178px, 0, 0)
      rotate3d(0, 1, 0, 180deg);
  }
}
@-webkit-keyframes leftwing {
  from {
    -webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  }
  50% {
    -webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 80deg);
  }
  to {
    -webkit-transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  }
}
@keyframes leftwing {
  from {
    transform: rotateX(90deg) rotate3d(0, 1, 0, 0deg);
  }
  50% {
    transform: rotateX(90deg) rotate3d(0, 1, 0, 80deg);
  }
  to {
    transform: rotateX(90deg) rotate3d(0, 1, 0, 00deg);
  }
}