翻轉格在IE9

不工作我已經創建了一個翻轉的div基於http://css3.bradshawenterprises.com烙內容演示（過渡和3D變換）1.翻轉格在IE9

它在所有瀏覽器的偉大工程，但IE 9不支持過渡和3D變換。我不需要爲IE9翻轉div，但我想要顯示圖像的.face.front一面，而不是.face.back一面出現。我想編寫JavaScript，也就是說，當IE9或更低，則顯示.face.front

http://jsfiddle.net/RC7WH/

來源

2012-04-13 tosca

如果你把前面的div第二則都留在了前面IE9

 <div class="front face"> 
      <p> front side</p> 
    </div> 
    <div class="back face center"> 
      <p> back side</p> 
    </div>

改成這樣......

 <div class="back face center"> 
      <p> back side</p> 
    </div> 
    <div class="front face"> 
      <p> front side</p> 
    </div>

看到IE9樣品這裏http://jsfiddle.net/eiu165/vdrXZ/1/

來源

2012-04-13 19:33:37 eiu165

3D轉換其實我已經試過了，但Firefox會很困惑，並與前開始，跳到快退，然後在前面再次登陸 – tosca 2012-04-15 05:29:37

它在Firefox中看起來不好。你說得對。 – eiu165 2012-04-30 20:45:21

如果IE 9有一個說.face.back {display：none）的css，那麼它將停留在正面。我需要編寫一個腳本，它會說類似於<！ - [如果lt IE 9]><不鏈接到「flipping.css」，但是鏈接到「noflipping.css」。通過這種方式，所有其他的惡意軟件都會顯示：阻止，包括IE 10（發佈時）和IE 9可以有自己的方式。 – tosca 2012-05-10 12:58:44

我解決了我自己的問題。由於IE9不支持3D轉換，因此它從正面div移到正面背面。我想讓faceback方面被忽略，所以我會顯示facefront的一面。這是DIV：

<div class="perspective"> 
     <div id="f1_container"> 
      <div class="f1_card shadow"> 
       <div class="front face"> 
        <img src="images/rocks01.jpg" width="448px" height="276px" alt="rocks talk"/> 
       </div> 
       <div class="back face center"> 
        <img src="images/rocks11.jpg" width="448px" height="276px" alt="rocks talk"/> 
       </div> 
      </div> 
     </div> 
     </div>

我創建一個IE condtion我放置在HTML中，現在的前側是可見的。這是我想要的。

<!--[if IE 9]><html> 
     <style type="text/css"> 
     .face.back{ 
      visibility:hidden; 
     } 
     </style> 
    <![endif]-->

這就是我想要的。我已將我的設計嵌入到滾動視差水平代碼中。感謝Paul Irish提供HTML5標籤的想法。看到這個：http://jsfiddle.net/eJnns/113/謝謝http://jsfiddle.net/Q7YU3/的角度/父母/子女，幫助我使用在Firefox 14

來源

2012-09-04 06:33:40 tosca

回答

相關問題