iPhone样机-使用CSS 3d空间为样机对齐图像的最佳方法是什么

Question

我正在为iPhone构建样机，但无法对齐图像并无法获取平面截图以匹配样机图像。

完成后的想法是，根据需要的使用，屏幕截图可以互换。它也需要具有响应性，只是为了使事情更难理清。

我一直在使用XYZ旋转，但似乎永远无法将屏幕截图的顶部和底部与手机屏幕的边缘正确匹配。

这是我正在构建的笔。 https://codepen.io/mark-feltwell/pen/VNXWbM

HTML

<div class="mobile_screen">
  <div class="mobile">
    <img src="http://testing.yourwebconcept.co.uk/iphone_angle.png" class="device">
    <div class="screen">
      <img src="http://testing.yourwebconcept.co.uk/displaytop.png">
      <img src="http://testing.yourwebconcept.co.uk/screenshot.png">
    </div>
  </div>
</div>

CSS

.mobile_screen {
  height: 800px;
  display: inline-block;
}

.mobile {
  position: relative;
  height: 100%;
}

.mobile img.device {
  position: relative;
  height: 100%;
}

.mobile .screen {
  position: absolute;
  left: 35px;
  top: -19px;
  width: 80%;
  padding: 0;
  overflow: visible;
  transform: rotateX(-42deg) rotateY(35deg) rotateZ(12deg);
  z-index: -1;
}

.mobile .screen img {
  width: 100%;
}

任何想法都很棒。谢谢！