html - 用透视图渲染HTML元素？

目标是使用透视图呈现HTML元素，如以下示例所示。

我们尝试使用CSS skew转换，但是这些转换看起来不正确，因为它们扭曲了元素的宽高比或产生了扭曲。

这是我们尝试过的CSS偏斜转换。这些看起来都不像下面的示例那样好。

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

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

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

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

您如何实现这种HTML元素的透视图呈现？

最佳答案

如您所说，结合使用透视图和一些旋转

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