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 transform doesn't work if perspective is set in the end of property

Answer 2

类似这样的事情。我使用CSS自定义属性，使计算更加明显。

请注意：变换属性的顺序非常重要。从右到左评估：

来自MDN transform 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中添加侧面和背面，但是您可以将其粘贴到您的Codepen中，并查看其工作原理。

用透视图渲染HTML元素？

3 个答案: