title: Using CSS transform produces artifacts
body: <p>I am trying to implement a flip animation using "figure". It works in each browser, but there is the special case that when running the code with Firefox in a Virtual Machine (tested with a Windows 10 x64 VM) on VMWare there are some strange artifacts.</p>
  
  <pre><code>#card.flipped {
   -webkit-transform: translateX( -100% ) rotateY( -180deg );
   -moz-transform: translateX( -100% ) rotateY( -180deg );
   -ms-transform: translateX( -100% ) rotateY( -180deg );
   -o-transform: translateX( -100% ) rotateY( -180deg );
   transform: translateX( -100% ) rotateY( -180deg );
  }
  </code></pre>
  
  <p>The code is here:
  <a href="http://jsfiddle.net/qayxswedcvfr/4hnqh9z2/" rel="nofollow">Fiddle example</a></p>
  
  <p>Please ignore the "FRONT" title. What I am trying to fix is the duplicates of the icons that can be seen when the figure is rotating, you can see it before the background becomes black. The black color is not a problem I am having using the code inside my website, but after the transition you see on the left say like a duplicate of the icon but transformed in a strange way, I tried the whole day to find the problem, but only if I don't use a transform duration it works, but then I don't get the animation.</p>
  
  <p>Do you have a clue what the problem could be?</p>