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);    }}