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

Question

目标是呈现具有透视图的 HTML 元素，如下面的示例所示。

我们尝试使用 CSSskew转换，但这些转换看起来不正确，因为它们会扭曲元素的纵横比或以其他方式造成扭曲。

这是我们尝试过的 CSS 倾斜转换。这些都不像下面的例子那么好。

代码笔： https ://codepen.io/anon/pen/MMzdPx

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

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

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

如何实现 HTML 元素的这种透视渲染？

标签： htmlcssmatrixperspective

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 变换不起作用