JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://hostcode.sourceforge.net/view/1600.txt"></script>
<div id="container">
<div id="doorDiv" data-scalemode="width" data-nativeanimation="true" data-targetsize="0.45" data-duration="600">
<img id="door" src="http://i.imgur.com/OkXJdCU.jpg"/>
</div>
</div>
CSS
html,body{
height:100%;
}
#container{
margin:0 auto;
text-align: center;
height:100%;
min-height: 99%;
height: auto !important;
width:100%;
background: url('http://i.imgur.com/eVwx3AI.jpg') no-repeat 0 0;
background-size: 100% 100%;
}
#doorDiv{
position: absolute;
top :50%;
left: 50%;
border: solid 2px;
-webkit-transform-origin: left;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
width: 8%;
background-color: black;
}
#doorDiv img{
-webkit-transform-origin: left;
-moz-transform-origin: left;
max-width: 100%;
}
JavaScript
$(document).ready(function() {
$("#doorDiv").click(function(evt) {
$(this).zoomTo({targetsize: 1.5, duration: 5000, easing: "ease-in", nativeanimation: true});
rotateDoor();
evt.stopPropagation();
});
var animating = false;
rotateDoor = function() {
if (animating)
return;
var door = $('#door');
animating = true;
openDoor(door, 5);
};
openDoor = function(door, angle) {
if (angle >= 90) {
animating = false;
return;
}
door.css('-webkit-transform', 'perspective(200px) rotateY( ' + angle + 'deg )');
door.css('-moz-transform', 'perspective(200px) rotateY( ' + angle + 'deg )');
setTimeout(function() {
openDoor(door, angle += 1);
}, 20);
};
});