Рендеринг HTML-элементов с точки зрения?

Question

Цель состоит в том, чтобы визуализировать элементы HTML в перспективе, как в примерах ниже.

Мы пытались использовать преобразования CSS skew, но они выглядели неправильно, поскольку они искажали соотношение сторон элемента или иным образомсозданные искажения.

Вот CSS-преобразования, которые мы попробовали.Ничто из этого не выглядит так хорошо, как примеры ниже.

Codepen: https://codepen.io/anon/pen/MMzdPx

transform: skew(20deg, -15deg);

transform: skew(45deg, -25deg);

transform: skew(45deg, -30deg);

Как вы можете добиться такого рода перспективного рендеринга элементов HTML?

Answer 1

Как вы сказали, используйте перспективу в сочетании с некоторым вращением

img {
  width:150px;
  margin:20px;
}
img.first {
  transform:perspective(500px) rotateY(20deg);
}
img.last {
  transform:perspective(500px) rotateY(-20deg);
}

<img src="https://i.imgur.com/DGAOsPz.png" class="first">
<img src="https://i.imgur.com/DGAOsPz.png" class="last">

img {
  width:150px;
  margin:30px;
  transform:perspective(500px)  rotateY(15deg) rotateX(50deg) rotateZ(-20deg);
}

<img src="https://i.imgur.com/DGAOsPz.png" >

Похожий вопрос для более подробной информации:

CSS 3d-преобразование не работает, если в конце свойства задана перспектива

Answer 2

Как то так.Я использовал пользовательские свойства CSS, чтобы сделать вычисления немного более очевидными.

Обратите внимание: порядок свойств преобразования очень важен.Оценивается справа налево:

От MDN-преобразование CSS

Функции преобразования умножаются слева направо, что означает, что составные преобразованияэффективно применяется в порядке справа налево.

Это означает, что transform: rotateX(90deg) translateX(100px) - это не то же самое, что transform: translateX(100px) rotateX(90deg).Первый сначала переводит, а затем вращается, в то время как последний выполняет вращение перед переводами.

.box {
  width: 130px;
  height: 268px;
  background-size: cover;
}
.box:nth-child(4n+1) {
  background: url(https://picsum.photos/id/100/136/276);
}
.box:nth-child(4n+2) {
  background: url(https://picsum.photos/id/200/136/276);
}
.box:nth-child(4n+3) {
  background: url(https://picsum.photos/id/300/136/276);
}
.box:nth-child(4n+4) {
  background: url(https://picsum.photos/id/400/136/276);
}

.container {
  transform: perspective(1200px) rotateX(60deg) rotateZ(-35deg) translate3d(-100px, -200px, -500px);
}

.skew {
  position: absolute;
  top: 200px;
  left: 50%;
  --width: 140px;
  --height: 278px;
  --x: 0;
  --y: 0;
  --offsetX: calc(var(--x) * var(--width));
  --offsetY: calc(var(--y) * var(--height));
  transform: translate(var(--offsetX), var(--offsetY));
}
.skew:nth-child(5n + 1) {
  --x: -2;
}
.skew:nth-child(5n + 2) {
  --x: -1;
}
.skew:nth-child(5n + 3) {
  --x: 0;
}
.skew:nth-child(5n + 4) {
  --x: 1;
}
.skew:nth-child(5n + 5) {
  --x: 2;
}
.skew:nth-child(n + 1):nth-child(-n + 5) {
  --y: -2;
}
.skew:nth-child(n + 6):nth-child(-n + 10) {
  --y: -1;
}
.skew:nth-child(n + 11):nth-child(-n + 15) {
  --y: 0;
}
.skew:nth-child(n + 16):nth-child(-n + 20) {
  --y: 1;
}
.skew:nth-child(n + 21):nth-child(-n + 25) {
  --y: 2;
}

<div class="container">
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
  <div class="skew box"></div>
</div>

Answer 3

Вы должны построить элемент так сказать.Следующее из вашего codepen: Изменен html:

<div class="perspective">
<div class="skew">
<div class="front"></div>
<div class="back"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</div>

изменен css:

.perspective {
position: relative;
-webkit-perspective: 1242px; /* Safari 4-8 */
perspective: 1242px;
height: 2688px;
}

.front {
width: 1242px;
height: 2688px;
max-width: 100%;
max-height: 100%;
position: absolute;
transform: rotateX(45deg) rotateY(-60deg) translateZ(-80em);
background: url(https://i.imgur.com/DGAOsPz.png);
}

.skew {
transform-style: preserve-3d;
transform: rotateX(10deg) rotateY(80deg);
height: 2560px;
width: 100%;
}

Еще нужно добавить стороны и обратно в CSS, но вы можете вставить это в свой код и посмотретькак это работает.