title: How to preserve-3d using css - firefox issue
body: <p>I want to be able to hide TEXT1, TEXT2, TEXT3 etc. when hovering with the mouse over either the image or text.
  I have managed to do this in chrome by adding 
      transform-style: preserve-3d;</p>
  
  <p>The link i am sharing with you works in chrome but not in firefox.</p>
  
  <p><a href="https://jsfiddle.net/tx3uf7ch/4/" rel="nofollow noreferrer">Working Code Link (works in Chrome but not in Firefox)</a></p>
  
  <pre><code> #f1_card {
       width: 100%;
       height: 100%;
       transform-style: preserve-3d;
       -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
  
       /** fixes non transitive 3d from parent  and child **/
       transform-style: preserve-3d;
       transition: all 0.5s linear;
       -webkit-border-radius: 200px;
       -moz-border-radius: 200px;
       border-radius: 200px;
   }
  </code></pre>
  
  <p>Could you please help me out with this issue in Firefox?</p>