翻转 div 从翻转内容演示中在 IE9 中不起作用

我根据翻

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

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

http://jsfiddle.net/RC7WH/

我解决了自己的问题。由于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条件，我将其放置在html中，现在正面可见。我想要的就是我想要的。

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

这就是我想要的。我已经将我的设计嵌入到滚动视差水平代码中。感谢Paul Ireland的HTML5标签创意。在： http://jsfiddle.net/eJnns/113/感谢 http://jsfiddle.net/Q7YU3/的观点/父母/孩子帮助我在 Firefox 14 中使用 3d 变换。

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

相关内容

最新更新

热门标签：