body {
  background-color: #eee;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 100px auto;
  max-width: 700px;
  /* activate 3D space */

  -webkit-perspective: 1800px;
  perspective: 1800px;
}

.element {
  width: 100%;
  height: 400px;
  background-color: rgba(0, 0, 0, 0.8);
  -webkit-transform: rotateY(50deg);
  transform: rotateY(50deg);
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.element img {
  -webkit-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  /* animate the image's transformation for demonstration purposes */

  -webkit-animation: swing 3s linear infinite;
  animation: swing 3s linear infinite;
}

@-webkit-keyframes swing {

  0% {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }

  50% {
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
  }

  100% {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }
}

@keyframes swing {
  0% {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }
  50% {
    -webkit-transform: rotateX(30deg);
    transform: rotateX(30deg);
  }
  100% {
    -webkit-transform: rotateX(-30deg);
    transform: rotateX(-30deg);
  }
}