css3交替翻板式旋转2张图片

来源：互联网发布：诺基亚e7软件编辑：程序博客网时间：2024/04/27 19:04

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8" />    <title>css3交替翻板式旋转2张图片</title>    <style>        *{margin:0;padding:0;}        #box{width:200px;height:200px;border:1px solid #999;}        #cont1{width:200px;height:200px;background:url(images/a.jpg);position:absolute;top:0;left:0;z-index:2;}        #cont2{width:200px;height:200px;background:url(images/b.png);position:absolute;top:0;left:0;z-index:1;}        #box:hover #cont1,#box:hover #cont2{transform:rotateY(180deg);-ms-transform:rotateY(180deg);-moz-transform:rotateY(180deg);-webkit-transform:rotateY(180deg);-o-transform:rotateY(180deg);}        #box:hover #cont2{z-index:2;}        #cont1,#cont2{transition:all .2s linear 10ms;}    </style>    <script src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.js"></script></head><body>    <div id="box">        <div id="cont1"></div>        <div id="cont2"></div>    </div></body></html>

案例图片：

0 0