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）。沒有運氣

.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); 
}