图片翻转特效

编辑：007 时间：2015-10-21

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>图片翻转特效</title>
<style>
.wrapper
{
   perspective:1000px;
   -webkit-perspective:1000px;
   -moz-perspective:1000px;
   -o-perspective:1000px;
   -ms-perspective:1000px;
   margin:200px;
   border:1px solid #06C;
}
.wrapper.hover .filter,
.wrapper:hover .filter{
    transform-style:preserve-3d;
    transform:rotateY(180deg);
}
.wrapper .filter{
    transition:1s;
    transform-style:preserve-3d;
    position:relative;
}
.wrapper,
.wrapper .filter .face,
.wrapper .filter .back{
    width:300px;
    height:450px;
}
.wrapper .filter .face,
.wrapper .filter .back{
    backface-visibility:hidden;    
    transform-style:preserve-3d;
    position:absolute;
    top:0;
    left:0;
    color:#F00;
}
.wrapper .filter .face{
  background:#093;
}
.wrapper .filter .back{
  background:#C6C;
  transform:rotateY(180deg);
}

/*IE内核*/
.IEwp{
    perspective:1000px;
   -webkit-perspective:1000px;
   -moz-perspective:1000px;
   -o-perspective:1000px;
   -ms-perspective:1000px;
   transform-style:preserve-3d;
   -webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
   -o-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
   margin:200px;
   border:1px solid #06C;
}
.IEwp:hover .filter .face{
    transform:rotateY(180deg);
}
.IEwp:hover .filter .back{
    transform:rotateY(0deg);
}
.IEwp,
.IEwp .filter .face,
.IEwp .filter .back{
    width:300px;
    height:450px;
}
.IEwp .filter{
    transition:1s;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
   -o-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
    position:relative;
}
.IEwp .filter .face,
.IEwp .filter .back{
    backface-visibility:hidden;    
    transition:1s;
    transform-style:preserve-3d;
    -webkit-transform-style:preserve-3d;
   -moz-transform-style:preserve-3d;
   -o-transform-style:preserve-3d;
   -ms-transform-style:preserve-3d;
    position:absolute;
    top:0;
    left:0;
    color:#F00;
}
.IEwp .filter .face{
  background:#093;
  transform:rotateY(0deg);
  z-index:2;
}
.IEwp .filter .back{
  background:#C6C;
  transform:rotateY(180deg);
}

</style>
<script type="text/">
    window. = function()
    {
         function ep()
        {
            if(!!window.ActiveX || "ActiveX " in window)
            {
                document.getElementById("wrapper").className = "IEwp";
            }
        }
        ep();
    }
</script>
</head>

<body>
<div class="wrapper" id="wrapper">
   <div class="filter">
       <div class="face">
           <h2>正面</h2>
       </div>
       <div class="back">
           <h2>背面</h2>
       </div>
   </div>
   
</div>
</body>

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：从自拍说起，硬件产品该怎么玩社群营销？

下一篇：Facebook员工的工作效率为何如此高

回复列表

图片翻转特效

400-692-8081