CSS3特效之翻转

来源：互联网发布：java attribute用法编辑：程序博客网时间：2024/05/01 10:42
这里写图片描述
鼠标悬停，图片翻转
这里写图片描述
<!doctype html><html>     <head>            <meta charset="UTF-8">            <meta name="Generator" content="EditPlus®">            <meta name="Author" content="">            <meta name="Keywords" content="">            <meta name="Description" content="">            <title>Document</title>            <style>                #container:before{                    content:"";                    display:table;                }                #container{                    width:250px;                    height:250px;                    border-radius:50%;                    background:-webkit-radial-gradient(circle,#FFFFFF,#F4F4F4,#D3D3D3);                    margin:auto;                    margin-top:100px;                }                #wrap{                    -webkit-perspective:500px;                    width:200px;                    height:200px;                    border-radius:50%;                    background-color:#fff;                    margin:auto;                    margin-top:25px;                }                #images{                    -webkit-transform-style:preserve-3d;                    -webkit-transition:1.5s;                    position:relative;                }                #wrap:hover #images{                    -webkit-transform:rotateY(180deg);                }                #images>div{                    position: absolute;                    -webkit-backface-visibility:hidden;                }                div.back {                    -webkit-transform:rotateY(180deg);                    }                img{                    width:200px;                    height:200px;                    border-radius:50%;                }            </style>     </head>     <body>        <div id="container">            <div id="wrap">                <div id="images">                    <div class="front">                        <img src="images/huan.jpg"/>                    </div>                    <div class="back">                        <img src="images/love.jpg">                    </div>                </div>            </div>        </div>     </body></html>
0 0