title: CSS Coin flip animation
body: <p>So I want to create a coin flip animation, what I tried is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@import "compass";
  
  body {
      background-color: #edebc4;
  }
  h1 {
      width: 50%;
      margin: 0 auto;
      text-align: center;
      font-family: arial;
      text-transform: uppercase;
  }
  .flip-container {
      position: absolute;
      perspective: 1000;
      top: 50%;
      left: 50%;
      @include transform(translate(-50%, -50%));
      /* flip the pane when hovered */
      &amp;:hover .flipper, 
      &amp;.hover .flipper {
          transform: rotateY(180deg);
      }
      &amp;, 
      .front, 
      .back {
          @include border-radius(100px);
          width: 100px;
          height: 100px;
          overflow: hidden;
      }
      /* flip speed goes here */
      .flipper {
          transition: 0.6s;
          transform-style: preserve-3d;
          position: relative;
          /* hide back of pane during swap */
          .front, .back {
              backface-visibility: hidden;
  
              position: absolute;
              top: 0;
              left: 0;
          }
          /* front pane, placed above back */
          .front {
              z-index: 2;
              /* for firefox 31 */
              transform: rotateY(0deg);
          }
          /* back, initially hidden pane */
          .back {
              transform: rotateY(180deg);
          }
      }/*.flipper*/
  }/*.flip-container*/</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;Coin flip&lt;/h1&gt;
  &lt;div class="flip-container" ontouchstart="this.classList.toggle('hover');"&gt;
      &lt;div class="flipper"&gt;
          &lt;div class="front"&gt;
              &lt;img src="//lorempicsum.com/futurama/100/100/1" alt="" /&gt;
          &lt;/div&gt;
          &lt;div class="back"&gt;
              &lt;img src="//lorempicsum.com/futurama/100/100/2" alt="" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>For some reason it doesn't work on my server or jsfiddle. What's more interesting, it actually does work on codepen - <a href="http://codepen.io/mbrillaud/pen/jPdjmm" rel="nofollow">http://codepen.io/mbrillaud/pen/jPdjmm</a></p>
  
  <p>Example jsfiddle: <a href="https://jsfiddle.net/r0xpoqmn/" rel="nofollow">https://jsfiddle.net/r0xpoqmn/</a></p>
  
  <p>What can be reason of that?</p>