Geek Answers Handbook

3d transformations on an SVG element

Is it possible to achieve perspective with the help of 3D transformations on SVG elements ?

I'm talking about something similar to how the Star Wars titles look from a 3D perspective. This is jsfiddle with the desired effect achieved using CSS3 3D transforms:

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

3D transforms are not supported by SVG elements . There are several workarounds:

If svg does not contain elements that should not be converted, you can use CSS 3D transformations for 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 the case of polygons, you make a two-dimensional polygon look like a three-dimensional polygon. In the following example, the red 3D rectangle is rotated ( rotateX(40deg) ), and the black rectangle is an SVG 2D polygon made to look like a 3D rotating 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>
+11
source

More articles:


All Articles