<div class="frame"> <div class="inner"> <span class="gloss"></span> <iframe src="http://www.bynd.com"></iframe> </div> </div>
body { background-image: url('http://cdn2.digitalartsonline.co.uk/cmsdata/slideshow/3473607/BARBICAN_012_EK4A5585_ipad_landscape.jpg'); background-position: top center; background-repeat: no-repeat; } .frame { margin: 220px auto 0 auto; width: 630px; height: 487px; -webkit-perspective: 1200px; -moz-perspective: 1200px; -ms-perspective: 1200px; -o-perspective: 1200px; perspective: 1200px; } .gloss { pointer-events: none; position: absolute; width: 130%; height: 45%; top: -20%; right: -5%; background: rgba(255,255,255,0.3); -webkit-transform: rotate(13deg); -moz-transform: rotate(13deg); -ms-transform: rotate(13deg); -o-transform: rotate(13deg); transform: rotate(13deg); } .inner { background-color: #fff; width: 100%; height: 100%; overflow: hidden; margin: -28px 0 0 54px; -webkit-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg); -moz-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg); -ms-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg); -o-transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg); transform: rotateX(13deg) rotateY(13deg) rotateZ(-18deg); } iframe { width: 100%; height: 100%; border: none; }