title: image flip via CSS not working in all browsers
body: <p>i m flipping an image through CSS and its wirking in mozila.but in all other browsers its not working.i m unable to know what i m missing here.</p>
  
  <p>Here is my code for image:</p>
  
  <pre><code>&lt;div id="f1_container"&gt;
  &lt;div id="f1_card" class="shadow"&gt;
    &lt;div class="front face"&gt;
      &lt;img src="http://placehold.it/300x300"/&gt;
    &lt;/div&gt;
    &lt;div class="back face center"&gt;
      &lt;p&gt;This is nice for exposing more information about an image.&lt;/p&gt;
      &lt;p&gt;Any content can go here.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and Here is my CSS:</p>
  
  <p></p>
  
  <pre><code>#f1_container {
    position: relative;
    margin: 10px auto;
    width: 450px;
    height: 281px;
    z-index: 1;
  }
  #f1_container {
    perspective: 1000;
  }
  #f1_card {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: all 1.0s linear;
  }
  #f1_container:hover #f1_card {
    transform: rotateY(180deg);
    box-shadow: -5px 5px 5px #aaa;
  }
  .face {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
  }
  .face.back {
    display: block;
    transform: rotateY(180deg);
    box-sizing: border-box;
    padding: 10px;
    color: white;
    text-align: center;
    background-color: #aaa;
  }
  &lt;/style&gt;
  </code></pre>