CSS3特效之翻转

17-01-20 来源：[db:作者]

收藏我要投稿

CSS3特效之翻转

鼠标悬停，图片翻转

<!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>
     </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>

#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%;
}

点击复制链接与好友分享!回本站首页