<!DOCTYPE html>
<html>
<head>
<title>Css3图片翻转</title>
<meta charset="utf-8" />
<style>
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}
.flip-container, .front, .back {
320px;
height: 480px;
}
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
.front {
background:#0e1;
z-index: 2;
transform: rotateY(0deg);
}
.back {
background:#ccc;
transform: rotateY(-180deg);
}
.backs {
transform: rotateY(0deg);
}
.fronts {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="flip-container">
<div class="flipper">
<div class="front" id="pid1">
<!-- 前 -->
<img src="./1.jpg" style="100%;height:100%"/>
</div>
<div class="back" id="pid2">
<!-- 后 -->
<img src="./2.jpg" style="100%;height:100%"/>
</div>
</div>
</div>
<button id="btn"> 按 钮 </button>
<script>
var _btn = document.getElementById("btn");
var _pid1 = document.getElementById("pid1");
var _pid2 = document.getElementById("pid2");
_btn.onclick = function(){
_pid1.className = "fronts front";
_pid2.className = "backs back";
}
</script>
</body>
</html>