backface-visibility: hidden; css3 new property
backface-visibility attribute defines whether the element is visible when the back faces the screen.
This property is useful if you don't want to see the back of an element when you rotate it.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title></title>
<style>
body{
margin: 0;
}
.box{
margin: 200px auto;
position: relative;
width: 250px;
perspective:800px;
transform-style: preserve-3d;
}
.front{
position: relative;
text-align: center;
line-height:200px ;
width: 250px;
height: 200px;
background-color: red;
border-radius: 5px;
z-index: 1;
transition: all 2s;
backface-visibility:hidden;
}
.back{
position: absolute;
top: 0;
left: 0;
text-align: center;
line-height:200px ;
width: 250px;
height: 200px;
background-color: blue;
border-radius: 5px;
transform: rotateY(180deg);
backface-visibility:hidden;
transition: all 2s;
z-index:0;
}
.box:hover .front{
transform: rotateY(-180deg);
/* z-index: 1; */
}
.box:hover .back{
transform: rotateY(0deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">前面</div>
<div class="back">后面</div>
</div>
</body>
</html>