title: backface visibility not working in safari
body: <p>I am trying to uss cssflip animation in my code in which the element rotates when hovered upon. I have used transition and backface-visibilty property. It is working fine on chrome but it is not working properly on safari. I have used webkit prefix as well for safari browser.</p>
  
  <p>`.card-container{</p>
  
  <pre><code>margin-top: 9%;
  perspective: 900px;
  -webkit-perspective: 900px;
  z-index: 1;
  </code></pre>
  
  <p>}</p>
  
  <p>.card{</p>
  
  <pre><code>float: left;
  width: 78.5%;
  height: 35%;
  margin-top: 25%;
  border: 1px solid #A08C87;
  transition: all 0.6s ease;
  -webkit-transition: all 0.6s ease;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;   
  </code></pre>
  
  <p>}</p>
  
  <p>#front #back{</p>
  
  <pre><code>color: white;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  </code></pre>
  
  <p>}</p>
  
  <h1>front{</h1>
  
  <pre><code>backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  </code></pre>
  
  <p>}</p>
  
  <h1>back{</h1>
  
  <pre><code>display: flex;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  font-size: 20px;
  </code></pre>
  
  <p>}
  .card-container:hover .card{</p>
  
  <pre><code>transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  </code></pre>
  
  <p>}</p>
  
  <h1>back{</h1>
  
  <pre><code>transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  </code></pre>
  
  <p>}` </p>