html, body { height: 100%; } div.wall { position: relative; height: 100%; background-color: #000000; } div.threshold { position: absolute; top: 50%; left: 50%; margin: -100px 0 0 -100px; width: 200px; height: 200px; background-color: #FFFFFF; } div.door { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #FF0000; -webkit-transform-style: preserve-3d; -webkit-perspective: 550px; -webkit-transform-origin: 0 50%; -webkit-transition: all 1s; -moz-transform-style: preserve-3d; -moz-perspective: 550px; -moz-transform-origin: 0 50%; -moz-transition: all 1s; -o-transform-style: preserve-3d; -o-perspective: 550px; -o-transform-origin: 0 50%; -o-transition: all 1s; transform-style: preserve-3d; perspective: 550px; transform-origin: 0 50%; transition: all 1s; } div.door:hover { -webkit-transform: scale(0.05,1) skew(0deg,20deg); /*use scale to change how wide it opens*/ -moz-transform: scale(0.05,1) skew(0deg,20deg); -o-transform: scale(0.05,1) skew(0deg,20deg); transform: scale(0.05,1) skew(0deg,20deg); }