Question

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

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

http://jsfiddle.net/RC7WH/

Answer 1

我解决了自己的问题。由于IE9不支持3D变换，因此它从脸部前部div移动到脸部背面。我希望这个面对方面被忽略，这样我才能展现出面对面的一面。这是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中使用3d Transform的透视/父/子。

Answer 2

如果你把前面的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/

翻转div翻转内容演示不能在IE9中工作

2 个答案: