CSS3クロスブラウザの問題

Question

私は、transform：rotatexとpreserve-3dを使ってボタンのdivをフリップしてクリックしてみようとしています。 Chromeでは問題なく動作していますが、FFやIEではサポートされていません（バージョン11以降のみサポート）。助けていただければ幸いです。

HTML

 <div class="flip col-sm-3"> 
     <div class="card"> 
      <div class="face front"> 
       <div class="small-video"> 
        <div class="clip-view clip-view-tenth"> 
         <t:tv.newvideo media="media" width="250" height="145" includeJs="false" fluid="true" watched="watched" showtitle="false" showdescription="true" /> 
         <div class="mask" onClick="$(this).hide(); $(this).parents('.clip-view').find('.video-js').trigger('play'); return false;"> 
          <div class="tool-icon tooltip-icon-small"> 
           <t:icon icon="play" /> 
          </div> 
         </div> 
        </div> 
        <t:delegate to="block:titleBlock" /> 
       </div> 
      </div> 
      <div class="face back"> 
       <t:delegate to="block:clipChapters" /> 
      </div> 
     </div> 
    </div> 

CSS

.flip { 
    -webkit-perspective: 800; 
    width: 400px; 
    height:290px; 
    position: relative; 
    margin: 0px 0px 50px 0px;} 
.flip .card.flipped { 
    -webkit-transform: rotatex(-180deg); 
    -moz-transform: rotatex(-180deg); 
    -o-transform: rotatex(-180deg); 
    -ms-transform: rotatex(-180deg); 
    transform: rotatex(-180deg); 

} 
.flip .card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d;  
    -webkit-transition: 0.5s; 
} 

.flip .card .face { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    z-index: 2; 
    text-align: center; 
} 

.flip .card .front { 
    position: absolute; 
    z-index: 1; 
} 

.flip .card .back { 
    -webkit-transform: rotatex(-180deg); 

} 

Answer 1

だけ-webkit-のブラウザのために書いたいくつかのスタイル、それが問題になるのでしょうか？

こちらもご覧ください：http://caniuse.com/#feat=transforms3d IEで3d変換（preserve-3d）はサポートされていません。

だから、またFirefoxのではないだけWebkitのもののためにスタイルを追加します。

.flip { 
    -webkit-perspective: 800; 
    width: 400px; 
    height:290px; 
    position: relative; 
    margin: 0px 0px 50px 0px; 
} 
.flip .card.flipped { 
    -webkit-transform: rotatex(-180deg); 
    -moz-transform: rotatex(-180deg); 
    -o-transform: rotatex(-180deg); 
    -ms-transform: rotatex(-180deg); 
    transform: rotatex(-180deg); 
} 
.flip .card { 
    width: 100%; 
    height: 100%; 
    -webkit-transform-style: preserve-3d; 
    transform-style: preserve-3d;  
    -webkit-transition: 0.5s; 
    -moz-transition:0.5s; 
    transition:0.5s; 
} 

.flip .card .face { 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -moz-backface-visibility:hidden; 
    backface-visibility:hidden; 
    z-index: 2; 
    text-align: center; 
} 

.flip .card .front { 
    position: absolute; 
    z-index: 1; 
} 

.flip .card .back { 
    -webkit-transform: rotatex(-180deg); 
    transform:rotateX(-180deg); 
    -moz-transform:rotateX(-180deg); 
}