3D Door Open Close Animation in CSS

.group:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
* html .group { height:1%; }
*:first-child+html .group { min-height:1px; }
body { background:#67695e; }
.body { width:800px; height:600px; line-height:1.9em; color:#fff; background:#0b3065 url(images/house.jpg) no-repeat; font-family:arial, sans-serif; }
.container { max-width:60em; margin:0 auto; padding:0 2em; }
.text.container { max-width:38em; text-align:center; margin:50px auto 100px; text-shadow:0 1px 2px rgba(0, 0, 0, 0.75); }
a { color:#da9803; text-decoration:none; }
h1.main-title { font-family:Arial, Helvetica, sans-serif; color:#fff; font-weight:normal; margin:1.25em; text-align:center; font-size:2.75em; letter-spacing:-1px; }
.door-container { width:375px; height:600px; margin:0 auto; display:block; -webkit-perspective:1200px; -moz-perspective:1200px; perspective:1200px; }
.door { z-index:5; box-shadow:0 2px 4px rgba(0, 0, 0, 0.25); -webkit-transition:0.75s; -moz-transition:0.75s; transition:0.75s; -webkit-transform-stylereserve-3d;
-moz-transform-stylereserve-3d; transform-stylereserve-3d; -webkit-transform-origin:125px 0; -moz-transform-origin:125px 0; transform-origin:125px 0; }
.door:after { content:""; position:absolute; top:0; bottom:0; left:3px; width:7px; z-index:20;
-webkit-transform:translateZ(1px); }
.door:hover { -webkit-transform:translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg);
-moz-transform:translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); transform:translateX(-10px) translateZ(35px) translateX(35px) rotateY(45deg); }
.door-cover { position:relative; color:#fff; bottom:0; left:50px; top:0px; width:375px; z-index:5; overflow:hidden; box-shadow:0 2px 4px rgba(0, 0, 0, 0.25);
background:url(images/cloud.png) 0px 0 no-repeat; background-size:auto 100%; -webkit-transform:rotateY(0deg) translateX(-49px);
-moz-transform:rotateY(0deg) translateX(-49px); transform:rotateY(0deg) translateX(-49px); -webkit-transform-origin:0 0; -moz-transform-origin:0 0;
transform-origin:0 0; height:600px; }
.door-spine { position:absolute; color:#fff; bottom:0; top:0; width:50px; z-index:5; overflow:hidden; box-shadow:0 2px 4px rgba(0, 0, 0, 0.25);
background:url(images/cloud.png) -64px 0 no-repeat; background-size:auto 100%; -webkit-transform:rotateY(-90deg) translateX(-49px);
-moz-transform:rotateY(-90deg) translateX(-49px); transform:rotateY(-90deg) translateX(-49px); -webkit-transform-origin:0 0; -moz-transform-origin:0 0;
transform-origin:0 0; height:600px; }
.door-spine h1 { display:block; width:325px; text-align:left; color:#fff; position:absolute; top:0; left:39px; text-indent:43px; text-transform:uppercase;
font-family:Arial, Helvetica, sans-serif; font-size:2em; opacity:0.75; font-weight:normal;
-webkit-font-smoothing:antialiased; -webkit-transform:rotateZ(90deg); -moz-transform:rotateZ(90deg); transform:rotateZ(90deg); -webkit-transform-origin:0 0;
-moz-transform-origin:0 0; transform-origin:0 0; }
.door-spine:before { display:block; content:""; width:100%; height:100%; background:rgba(0, 0, 0, 0.3); }

<div class="body">
<div class="container group">
<div class="door">
<div class="door-cover"><h1 style="text-align:center; text-shadow:1px 1px #dbddce; color:#414434; font:bold 30px Verdana, Geneva, sans-serif;">
3D OPEN DOOR ANIMATION BY MUTHUJOO</h1><br><br><br><br>
<div align="right"><img src="images/handle.png"></div>
</div>
<div class="door-spine"><h1>Designd�By�Muthujoo</h1></div>
</div>
</a>
</div>
</div>

Tagged in:

• css3 animation
• 3d animation css3
• css3 rotation
• open close css3