title: Images disappear on hover in firefox due to use of preserve 3d
body: <p>this is a sample of what I have made.
  <a href="https://jsfiddle.net/shrutibansal/sbjp0Leh/" rel="nofollow noreferrer">https://jsfiddle.net/shrutibansal/sbjp0Leh/</a></p>
  <p>the image is using transformZ property on hover, and the image disappears automatically on hovering sometimes.</p>
  <p>I couldn't find  any solution or any alternative with which the same effect can be created</p>
  <pre><code> .portfolio {
  transform: rotateX(60deg) rotateY(0deg) rotate(-45deg);
  transform-style: preserve-3d;
  
  &amp;--img {
    transition-property: transform;
    transform-origin: center center;
    transition-duration: 294ms;
  }
  :hover {
    transform: translateZ(1.5em);
  }
  </code></pre>
  <p>}</p>