您现在的位置：首页 >> 前端 >> 内容

CSS3特效之翻转

时间：2017/1/20 9:53:04 点击：

　　核心提示：CSS3特效之翻转鼠标悬停，图片翻转 !doctype htmlhtml headmeta charset=UTF-8meta name=Generator content=EditPlusmeta...

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>
        <p id="container">
            <p id="wrap">
                <p id="images">
                    <p class="front">
                        <img src="images/huan.jpg"/>
                    </p>
                    <p class="back">
                        <img src="images/love.jpg">
                    </p>
                </p>
            </p>
        </p>
     </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>p {
	position: absolute;
	-webkit-backface-visibility: hidden;
}

p.back {
	-webkit-transform: rotateY(180deg);
}

img {
	width: 200px;
	height: 200px;
	border-radius: 50%;
}