SVG元素上的3D转换

  • Z时代
  • 2024-01-10
  • 分类：问答

是否可以通过 进行 来实现透视？

我说的是与《星球大战》首部作品的3d透视图相似的事物。这是一个使用 CSS3

3d转换达到预期效果的jsfiddle： __

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

回答：

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

来源答案：

。不过，有一些解决方法：

如果svg不包含不应转换的元素，则可以 使用 ：

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>

以上是 SVG元素上的3D转换 的全部内容， 来源链接： utcz.com/qa/434928.html

回到顶部