iPhone Mockup - Какой лучший способ использовать CSS 3D-пространство для выравнивания изображений для макета - PullRequest
Новая
       51

iPhone Mockup - Какой лучший способ использовать CSS 3D-пространство для выравнивания изображений для макета

0 голосов
/ 18 апреля 2019

Я создаю макет для 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%;
}

Любые идеи были бы великолепны. Спасибо!

...