js实现开门效果

HTML 

<div class="indexTop">
  <div class=" divleft" id="left"></div>
  <div class=" divright" id="right"></div>
  <input type="button" value="点击登录" class="inputLogin">
</div>

Css

.indexTop{
    width: 60em;
    height: 40em;
    text-align: center;
    margin: 0 auto;
    position: relative;
    background-color: darkslategrey;
}
.divleft{
    width:30em;
    height: 40em;
    background: url("../picture/b.png") no-repeat;
    float: left;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.divright{
    width:30em;
    height: 40em;
    background: url("../picture/openTheDoor.jpg") no-repeat;
    float: right;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
}
.inputLogin{
    background: blue;
    width: 20em;
    height: 5em;
    position: absolute;
    top: 40em;
    display: block;
    margin-left: 35%;
}

js

var i=0;
var timeid ;
$("input[type=button]").click(function () {
    timeid = setInterval(function(){
       i=i+0.1;
        css(i)
    },1)

})
function css(i){
    if(i<72){
            $("#left").css("transform","rotateY("+i+"deg)");
        $("#left").css("transform-origin","left");
        $("#right").css("transform","rotateY(-"+i+"deg)");
        $("#right").css("transform-origin","right");
    }else{
        clearInterval(timeid);
    }

}