css 实现 div 翻转样式。
<html>
<head>
<meta charset="UTF-8">
<title>css 实现 div 翻转样式</title>
<style>
.box{
width:100%;
height:300px;
text-align:center;
padding:10px 5px;
position:relative;
perspective:1000px;
.box-front, .box-opposite{
transform-style:preserve-3d;
backface-visibility:hidden;
transition-duration:.5s;
transition-timing-function:'ease-in';
}
.box-opposite{
transform:rotateY(180deg);
visibility:hidden;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
}
}
.box-front{
width:200px;
height:300px;
border-radius:4px;
background-color:#ee8c59;
}
.box-opposite{
width:200px;
height:300px;
border-radius:4px;
background-color:#ce8483;
}
.box_reverse{
.box-front{
transform:rotateY(180deg);
visibility:hidden;
}
.box-opposite{
transform:rotateY(360deg);
visibility:visible;
}
}
</style>
</head>
<body>
<div class="box" id="reverse" onclick="changeReverse()">
<div class="box-front">正面</div>
<div class="box-opposite">反面</div>
</div>
<script>
var isRolling = false, boxClass = document.getElementById("reverse");
function changeReverse() {
isRolling = !isRolling;
if (isRolling) {
boxClass.className = "box box_reverse"
} else {
boxClass.className = "box"
}
}
</script>
</body>
</html>