0

我创建了一个基于http://css3.bradshawenterprises.com翻转内容演示 1 的翻转 div（过渡和 3d 变换）。

它适用于所有浏览器，但 IE 9 不支持过渡和 3D 变换。对于 IE9，我不需要 div 来翻转，但我希望图像的 .face.front 显示，而不是 .face.back 显示。我想写一个JavaScript来说如果IE9或更低，然后显示.face.front

http://jsfiddle.net/RC7WH/

4

2 回答 2

2

我解决了我自己的问题。由于 IE9 不支持 3D 变换，它从 face front div 移动到 face back side。我希望忽略正面的一面，这样我就可以展示正面的一面。这是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>

我创建了一个放置在 html 中的 IE 条件，现在可以看到正面。这就是我想要的。

    <!--[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 中使用 3d 变换的透视/父/子。

于 2012-09-04T06:33:40.253 回答
0

如果你把前面的 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-13T19:33:37.357 回答