Teo Teo - 8 months ago 100
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>



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>

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 :

  width:200px; height:100px;
  transform:perspective(500px) rotateX(40deg);
  width:220px; height:auto;
div, svg{
  margin:0 10px;
<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=""/>