css3翻转

忘记在哪里看到的了
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
	<style type="text/css">
		.flip-container {
    -webkit-perspective: 500;
    -moz-perspective: 500;
    -ms-perspective: 500;
    perspective: 500;
    -ms-transform: perspective(500px);
    -moz-transform: perspective(500px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    margin: 30px;
    display: inline-block;
    border: 1px solid #aaa;
    position: relative;
}
/*由于内层绝对定位导致高度缺少，这里显式设置了宽高*/
.flip-container, .front, .back {
    width: 200px;
    height: 200px;
}

.flip-container:hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(180deg);
}
.flip-container:hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
    z-index: 3; /* 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front */
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.6s;
    -moz-transition: 0.6s;
    -o-transition: 0.6s;
    -ms-transition: 0.6s;
    transition: 0.6s;
    position: absolute;
    top: 0px;
    left: 0px;
}
.front {
    background: red;
    z-index: 2;
}
.back {
    background: green;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
}
	</style>
</head>
<body>
	<div class="flip-container">
    <div class="front">here is content : AA</div>
    <div class="back">here is content : BB</div>
</div>  
</body>
</html>
猜你喜欢
