3D transforms Keyframes

by alekskorovin

HTML

<section class="container">
    <div id="card" class="">
      <figure class="front">А</figure>
      <figure class="back">Ц</figure>
    </div>
  </section>

CSS

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0% {-webkit-transform: rotateY( 180deg )  rotateX( 0deg )   }
50% {-webkit-transform: rotateY( 0deg ) rotateX( 360deg ) }

75% {-webkit-transform: rotateX( 360deg ) rotateZ( 0deg ) rotateY( 0deg )  }
100% {-webkit-transform: rotateX( 0deg ) rotateZ( 360deg ) rotateY( 180deg ) }

}

.container {
      width: 200px;
      height: 260px;
      position: relative;
      margin: 0 auto 40px;
      border: 1px solid #CCC;
      -webkit-perspective: 200px 10px;
    }

    #card {
      width: 200px;
      height: 260px;
      position: absolute;
      -webkit-transition: -webkit-transform 1s;
      -webkit-transform-style: preserve-3d;
        -webkit-animation: myfirst 10s;
    }
    #card.flipped {
      -webkit-transform: rotateY( 180deg );
    }
    #card figure {
      display: block;
      height: 100%;
      width: 100%;
      line-height: 260px;
      color: white;
      text-align: center;
      font-weight: bold;
      font-size: 140px;
      position: absolute;
    opacity: 0.7;
    }

    #card .front {
      background: red;
      
     
    }

    #card .back {
      background: blue;
      -webkit-transform: rotateY(180deg ) translateZ( 50px );
    }