3d transforms on SVG element

by

Update Nov 2018:

Testing the snipet from the question in latest chrome and Firefox works. Although support for 3d transforms on svg elements isn’t very wide, browsers are implementing it more and more.

Origin 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>

More Related Contents:

  1. Why does order of transforms matter? rotate/scale doesn’t give the same result as scale/rotate
  2. Flip a 3D card with CSS
  3. CSS3 3D Transform doesn’t work on IE11
  4. img src SVG changing the styles with CSS
  5. Why does applying a CSS-Filter on the parent break the child positioning?
  6. Inline SVG in CSS
  7. SVG animation is not working on IE11
  8. CSS transparent curved shape with two rounded sides
  9. Setting transform-origin on SVG group not working in Firefox
  10. SVG USE element and :hover style
  11. How to animate handwriting text on the web page using SVG?
  12. Hover effect : expand bottom border
  13. Specify an SVG as a background image and ALSO style the SVG in CSS?
  14. Outlining and partially filling an SVG Shape
  15. Can I change the fill color of an svg path with CSS?
  16. Spin or rotate an image on hover
  17. SVG in img element proportions not respected in ie9
  18. Deprecated SMIL SVG animation replaced with CSS or Web animations effects (hover, click)
  19. How can I apply multiple transform declarations to one element?
  20. How can I use CSS3 transform on a span?
  21. How can I change the color of an ‘svg’ element?
  22. How to add animated gradient to an svg path?
  23. Make CSS3 triangle with linear gradient
  24. CSS Transform with element resizing
  25. Fill only Half a star with SVG
  26. SVG Fill not being applied in FireFox
  27. Tint image using CSS without overlay
  28. Why don’t CSS filters work on SVG elements in Chrome?
  29. webkit transform blocking link
  30. Why does enabling hardware-acceleration in CSS3 slow down performance?

Leave a Comment