iPhone + Screenshot

need a fix

HTML

<div class="iphone">
    <div class="screenshot"></div>
</div>

SCSS

.iphone {
    width: 100%;
    position: relative;
    height: 0;
    padding-bottom: 67.7%; // 100% / 2644px * 1790px 
    background: url(https://dl.dropbox.com/s/b5bhqt4alv9yf34/iphone2.png?dl=1) no-repeat;
    background-size: cover;
    z-index: 100;
}

.screenshot {
    position: absolute;
    background: url(https://dl.dropbox.com/s/jixmqjlpnjnyndr/tsogo-iphone%20%282%29.jpg?dl=1) 50% 0 no-repeat;
    background-size: cover;
    left: -88px; // to compensate 'transform: translate' from matrix3d
    top: -256px; // to compensate 'transform: translate' from matrix3d
    width: 54.5%;
    height: 0;
    padding-bottom: 96.88%; // 54.5% / 720px * 1280px
    transform-origin: 0 0;
    transform: matrix3d( 0.642387, -0.289132, 0, 0.000087, 0.456665, 0.32747, 0, -0.000096, 0, 0, 1, 0, 88, 256, 0, 1);
    margin: 19.4% 0 0 6.6%;
    z-index: 200;
}