Perspectiva

perspectiva.html

<div class="device">
    <div class="conteudo">
        <div class="alto-falante"></div>
        <div class="imagem-device"></div>
        <div class="botao"></div>
    </div>
</div>

.device{background:#000; border-radius:3em; box-shadow:0 4px 15px rgba(0,0,0,.6); border:1px solid rgba(48,48,47,.5); height:340px; margin-left:-90px; position:absolute; top:70px; left:50%; padding:3px; width:180px; -webkit-transform:rotateY(40deg); -webkit-transition:2s ease-in;}

.device:before{background:#333; border-radius:3em; box-shadow:0 1px 9px rgba(0,0,0,.6); content:''; display:block; height:100%; position:absolute; top:0; left:0; width:100%;}

.device:after{background:linear-gradient(45deg,rgba(255,255,255,0) 60%,rgba(255,255,255,.5) 100%); border-radius:3em; content:''; position:absolute; top:0; right:0; bottom:0; left:0; z-index:1;}

.conteudo{background:radial-gradient(ellipse at center,rgba(0,0,0,.65) 0,rgba(0,0,0,0) 100%); background-color:#000; border-radius:3em; border:3px solid #000; height:100%; position:relative;}

.alto-falante {background:#000; border-radius:7px; box-shadow:0 1px 0 rgba(255,255,255,.125); height:.6em; position:absolute; top:25px; left:65px; width:2.7em; z-index:2;}

.imagem-device{background:url(http://placehold.it/154x232/ffcc00); height:232px; position:absolute; top:45px; left:6px; width:154px;}

.botao {background:#333; border-radius:0 0 7px 7px; box-shadow:0 1px 0 rgba(255,255,255,.125); height:.6em; margin-left:0; position:absolute; bottom:17px; left:65px; width:3em; z-index:2;}

.botao:after{background:#797e80; border:0; border-radius:0 0 .4em .4em; box-shadow:inset 0 2px 4px #000; content:''; display:block; height:.5em; margin:0 auto; position:relative; top:0; left:0; overflow:hidden; width:2.7em;}