Css3 door opening Effect

Css3 is tricky, with a small effect of opening the door. It is only applicable to webkit kernel browsers. It is best to open it with Google. The compatible code of other advanced browsers will not be copied. 1. door {position: relative; width: 400px; height: 300px; overflow: hidden; border: 2px solid #000; background: #000;} 2. door: before ,. door: after {content: ''; position: absolute; left: 0; width: 0; height: 0; overflow: hidden; border-color: #000 transparent; border-style: solid; border-width: 0 200px; z-index: 2; transition: all. 8 s finished;} 3. door: before {top: 0;} 4. door: after {bottom: 0; border-color: transparent #000 transparent;} 5. door: hover: before ,. door: hover: after {border-width: 40px 200px;} 6. door-left ,. door-right {position: relative; float: left; width: 50%; height: 100%; background: # f00; box-sizing: border-box; transition: all. 5 s success;} 7. door-left {border-right: 2px solid #000;-webkit-transform-origin: 0 0;} 8. door-left: before ,. door-right: before {content: ''; position: absolute; width: 10px; height: 10px; top: 50%; margin-top:-5px; border-radius: 50%; background: #000;} 9. door-left: before {right: 5px;} 10. door-right: before {left: 5px;} 11. door-right {border-left: 2px solid #000;-webkit-transform-origin: 100% 0;} 12. door: hover. door-left {-webkit-transform: rotateY (-90deg);} 13. door: hover. door-right {-webkit-transform: rotateY (90deg );} copy code 1 <div class = "door"> 2 <div class = "door-left"> </div> 3 <div class = "door-right"> </div> 4 </div>