您的位置：首页 > Web前端 > CSS

Css3图片翻转

2015-06-26 11:55 609 查看

<!DOCTYPE html>
<html>
<head>
<title>Css3图片翻转</title>
<meta charset="utf-8" />
<style>
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
}

.flip-container, .front, .back {
width: 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="width:100%;height:100%"/>
</div>
<div class="back" id="pid2">
<!-- 后 -->
<img src="./2.jpg"  style="width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航