#container {
  perspective: 1200px; }
#parent {
  transform-style: preserve-3d; }

#container {
  perspective: 1200px; }
#parent {
  transform-style: preserve-3d;
  transform: rotateY(180deg); }

#front, #back {
  backface-visibility: hidden; }
#back {
  transform: rotateY(180deg); }

#back {
  transform: translateX(100%); }

#back {
  transform: rotateY(180deg)
             translateX(100%); }

#back {
  transform: rotateY(180deg); }

@keyframes rotate-offcenter {
   from {
    transform: rotateY(0deg); }
   to {
    transform: translateX(-100%)
               rotateY(180deg); }
}
#parent {
  transform-origin: right center;
  animation: rotate-offcenter; }

@keyframes rotate-zoom {
  from {
    transform: translateZ(0)
               rotateY(0deg); }
  20% {
    transform: translateZ(-200px)
               rotateY(30deg); }
  80% {
    transform: translateZ(-200px)
               rotateY(150deg); }
  to {
    transform: translateZ(0)
               rotateY(180deg); }
}
#parent {
  animation: rotate-zoom; }