css - SVG 元素的 3d 变换

Question

是否可以通过 SVG 元素的 3d 转换实现透视？

我说的是类似于 Star Wars 开场标题在 3d 视角下的样子。这是 jsfiddle使用 CSS3 3d 转换达到预期效果:

<section style="transform: perspective(200px) rotateX(-30deg); transform-origin: 50% 100%; text-align: justify; width: 100px;">
  <p style="backface-visibility: hidden;">TEXTTEXTTEXT</p>
</section>

Answer 1

---

2018 年 11 月更新:

在最新的 chrome 和 Firefox 中测试问题中的代码片段。虽然对 svg 元素的 3d 转换的支持不是很广泛，但浏览器正在越来越多地实现它。

---

原始答案:

SVG 元素不支持 3D 转换。不过有一些解决方法:

如果 svg 不包含不应转换的元素，您可以对 SVG 元素本身使用 CSS 3d 转换:

svg {
  width: 70%;
  margin: 0 auto;
  display: block;
  -webkit-transform: perspective(300px) rotateX(30deg);
  transform: perspective(300px) rotateX(30deg);
}

<svg viewbox="0 0 100 20">
  <text x="0" y="20">TEXTEXTEX</text>
</svg>

如果是多边形，您可以使 2D 多边形看起来像 3D 多边形。在下面的示例中，红色矩形是 3D 旋转的 (rotateX(40deg))，黑色矩形是 2D SVG 多边形，看起来像 3D 旋转的矩形:

div{
  display:inline-block;
  width:200px; height:100px;
  background:red;
  transform:perspective(500px) rotateX(40deg);
}
svg{
  display:inline-block;
  width:220px; height:auto;
}
div, svg{
  display:inline-block;
  margin:0 10px;
}

<div></div>
<svg viewbox="0 0.5 10 4">
  <polygon points="9.9 4.1 0.1 4.1 0.7 0.6 9.3 0.6" fill=""/>
</svg>