Applying perspective transforms to SVG

[bromel]

Hi all,

I am just experimenting with 3d transforms on SVG elements, i have done a simple pen and been looking into Intro to CSS 3D for some ideas on how to implement. I have done a simple pen and tried to implement it without success. I have seen many examples with html and css and was wondering if the principle is the same in implementing to work. Any help/resources/examples would be greatly appreciated.

 

many thanks

 

bromel

See the Pen LYYYLRG?editors=1010 by w9914420 (@w9914420) on CodePen

[OSUblake]

2 minutes ago, bromel said:

I am just experimenting with 3d transforms on SVG elements

 

Sorry, 3d transforms on SVG elements isn't supported. I think the only browser that can correctly do 3d transforms is Firefox. If you want to do 3d stuff, you'll need to wrap your SVG in a div, and do it the CSS way.

[bromel]

Hi @OSUblake

 

many thanks for the heads up

 

regards

 

Bromel

[bromel]

Hi @OSUblake

 

I stumbled across a video by Chris Gannon which shows a method of creating a 3d effect in SVG and I came up with the below which was the effect that i was trying to create initially.

 

See the Pen oNNNoVw by w9914420 (@w9914420) on CodePen

 

Just thought I would share for anyone else interested ?

[OSUblake]

Oh yes, skew is commonly used to do faux-3d.

 

One thing to note is that you won't be able to do that in the next version of GSAP because it's based on how CSS skew works, which causes the element to stretch.

[Deka87]

Just wanted to share that if you want to animate e.g. an image or any other SVG element that can be reproduced with HTML & CSS, you can use SVG's <foreignObject> and animate it with GSAP then. E.g.:

 

<svg>

    <foreignObject x={0} y={0} width={1920} height={1080}>

        <div xmlns="http://www.w3.org/1999/xhtml">

            <img id="img" width={1920} height={1080} src="/foo.png" />

        </div>

    </foreignObject>

</svg>

[Alex Jester]

After finding this post and discovering that perspective effects don't work inside inline SVG files, as well as the "rotationY" tweens with GSAP, I made it using CSS variables and setting an upscale in relation to the angle using some utilities (+ a small shadow effect).

Not the perfect result, but much better than nothing and my client was happy with the final result.

I hope this helps in this case too, maybe some improvement ideas will come...

See the Pen XWGxRMm by jester6 (@jester6) on CodePen