Show your work in context with photo overlay, iframe and 3d css

Creating digital sites and apps is very satisfying. However it's difficult to imagine/explain the context of where the user would use the app or site and who they are. Lets take a look at how we can imitate a real user using your app.

One of the ways designers/videographers have tried to get around this, is to photograph/video the user using the app in a specific situation. This is a powerful technique as it tells us alot about how the product is expected or actually being used.

I wanted to see how we could do this using modern technologies to make it more interactive.

First we need to show a project in the page. You could use an image, or load the html as an include, but i've decided to use an iframe to see the actual working site:

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

Then we can add some css to angle it to match a background image of a person holding an iPad:

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

.inner {
    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;
}

Next we can add some gloss to the iframe to make it look like behind the screen:

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

and some css magic

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

You can view the working version here:

http://jsfiddle.net/kmturley/nxt25/34/

Note IE8 & IE9 do not support 3d transforms so they will see a flat iframe: