iframe perspective

by kmturley

HTML

<div class="frame">
    <div class="inner">
        <span class="gloss"></span>
        <iframe src="http://www.bynd.com"></iframe>
    </div>
</div>

CSS

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;
}