CSS3的开门效果

---

记得在2010年的时候，学了一下flex语言，看到一个示例是一个开门效果，那时感觉很高大上，虽然早已有了CSS3，但发现从网上找了一下类似这种效果的实现还是真的比较少，反正搜了一些相关的没有搜索到，点击图片查看效果，示例写的比较简单，右键源文件为相关代码。

运行结果

点击图片开门效果，门开了没关上，只能开一次

参考代码

<title>开门大吉-点击图片</title>

<style type="text/css">

.imageBox{

   margin: 10px auto;    width: 300px;    height: 300px;    position: relative;    overflow: hidden; } #bg_box{    width: 100%;    height: 300px;    position:absolute;    top:0; left: 0;    background:url("bg.jpg") no-repeat scroll;    transition: 5s;    opacity: 0.2; } #fg_left{    width: 50%;    height: 100%;    background: url("fg.jpg") no-repeat scroll left 0px;    transition: 5s;    position:absolute;    top:0; left: 0; } #fg_right{    width: 50%;    height: 100%;    background: url("fg.jpg") no-repeat scroll right 0px;    transition: 5s;    position:absolute;    top:0; right: 0; }

</style>

<script type="text/javascript">

function openImage(){    var right = document.getElementById("fg_right");    right.style.transform = "translate(100%,0) rotateY(160deg)";    var left = document.getElementById("fg_left");    left.style.transform = "translate(-100%,0) rotateY(-160deg)";    var bgBox = document.getElementById("bg_box");    bgBox.style.opacity = 1;

}

</script>

<div class="imageBox">    <div id="bg_box"></div>    <div id="fg_left" onclick="openImage()"></div>    <div id="fg_right" onclick="openImage()"></div>

</div>

 点赞

---

 发表评论

---

 评论列表

---