html5 - Unexpected rendering (css transform) on Firefox -

please take @ pen... http://codepen.io/anon/pen/ejeynm

`<div class="main-wrap">   <div class="card-preview-cont">     <div class="envelope">       <div class="env-section env-front"></div>       <div class="env-section env-back">         <div class="section-content">           <div class="env-front--flap">             <div class="svg-responsive-cont">               <svg version="1.1" id="layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewbox="0 0 536 184.1" enable-background="new 0 0 536 184.1" xml:space="preserve">                 <path fill="black" d="m535.9,0l0,0l254.3,178.3c0,0,6.4,5.6,13.5,5.8l0,0c7.8,0,16.1-5.2,16.1-5.2l535.9,0z" />               </svg>             </div>           </div>           <div class="card-wrap">             <div class="card-section card-cover">card outer</div>             <div class="card-section card-cover--inner">card inner</div>             <div class="card-section card-base">card base</div>           </div>           <div class="env-front-cover-wrap">             <div class="env-front-cover"></div>           </div>         </div>       </div>     </div>   </div> </div>` 

when clicking on envelope flips , card goes out.. clicking on card should open it. on chrome works perfect, on ie works fine (besides card flickering). on firefox cant card open right way (:x)

can 1 figure out problem on firefox? , if can find way fix ie flickering when card slides up, awesome!

thanks in advance.