CSS3 animate turn下的门开关效果实例页面

展示

代码

CSS代码：

.box {
    width: 268px;
    height: 600px;
    padding-top: 30px;
    padding-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}
.list {
    position: absolute;
}
.door {
    margin: 34px 0 0 38px;
}
            

HTML代码：

<div id="box" class="box viewport-turn" title="点击开关门">
    <a href="#zhangxinxu" class="list"><img src="//image.zhangxinxu.com/image/blog/201211/door-k.png" alt="门框" /></a>
    <a href="#zhangxinxu" class="list door turn in"><img src="//image.zhangxinxu.com/image/blog/201211/door-m.jpg" alt="门面" /></a>
</div>
            

JS代码：

var eleDoor = $("#box").bind("click", function() {
    if (eleDoor.hasClass("in")) {
        eleDoor.removeClass("in").addClass("out reverse");    
    } else {
        eleDoor.addClass("in").removeClass("out reverse");    
    }
    return false;
}).find(".door");