Teo Teo - 1 month ago 23
CSS Question

3d transforms on SVG

Is it possible to achieve 3d like perspective transforms on an SVG element ?

I'm talking about something similar with how the Star Wars opening titles look like.

This is a jsfiddle I made with the same desirable effect achieved using css3 transform:



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





fiddle

Answer

3D transforms aren't supported on SVG elements. There are a few workarounds though :

If the svg doesn't contain elements that shouldn't be transformed, you can use CSS 3d transforms on the SVG element itself :

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>

In case of polygons, you make a 2D polygon look like a 3D polygon. In the following example, the red rectangle is 3D rotated (rotateX(40deg)) and the black rectangle is a 2D SVG polygon made to look like a 3D rotated rectangle :

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>