Card flip is not working for safari
<p>I have written code for card flip.</p>

<p>Here, card flip rotation(3D rotation) is working fine in chrome, firebox, internet explorer but when i open it in <strong>safari</strong>, card flip rotation is not working perfectly.</p>

<p>In safari(<strong>version > 8.0.0</strong>), card is rotated but not with <strong>3d animation.</strong></p>

<p>Please let me know if any of you have any solutions.</p>

<p>Following is the code:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code> $(".btn").click(function() {
   $("#card").toggleClass("flipped");
 });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
  width: 200px;
  height: 260px;
  position: relative;
  perspective: 800px;
  -webkit-perspective: 800px;
  -o-perspective: 800px;
  -moz-perspective: 800px;
}
#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-transition: transform 1s;
  -o-transform-style: preserve-3d;
  -o-transition: transform 1s;
  -moz-transform-style: preserve-3d;
  -moz-transition: transform 1s;
}
#card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -o-backface-visibility: hidden;
}
#card .front {
  background: red;
  font-size: 36px;
}
#card .back {
  font-size: 36px;
  background: blue;
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}
#card.flipped {
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -o-transform: rotateY(180deg);
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;section class="container"&gt;
  &lt;div id="card"&gt;
    &lt;figure class="front"&gt;1&lt;/figure&gt;
    &lt;figure class="back"&gt;2&lt;/figure&gt;
  &lt;/div&gt;
&lt;/section&gt;

&lt;button class="btn"&gt;&lt;span&gt;Flip card&lt;/span&gt;
&lt;/button&gt;</code></pre>
</div>
</div>
</p>