3D Transform using video/gif

Is it possible to use a 3D transform in combination with a gif/video?

So the image would flip over to reveal the gif/video.

https://preview.webflow.com/preview/theillustratrice?preview=a2995dbf1ef6838f6e6e2d4d833644a2

Hi @theillustratrice, I was just passing by and saw this - I’ve not tried 3D transforms using gifs/video, but I would gamble and say yes it is possible - but you need to have a div ‘Wrapper’ with a two divs in (one div for the front and one div for the back), then add your images/gifs to these divs. I notice you just have a div Block with the image and gif in. This will not work. You need to put these inside div blocks inside the Wrapper div.

See here, Webflow - Webfonic Solids

If you click on FireCardFront and go to the Navigator you will see the set up. There’s a divWrapper that hold everything (FireCard) then two divs inside this for front and back (firecardFront - firecardBack). Firecard has the Childern Perspective set to 1000. Make sure to hide the ‘Backfaces’ of the front and back divs correctly.

Hope this helps! Regards Kai

btw… In my experience 3D Transforms that rotate front to back do not work very well in IE or Firefox - Chrome only!

@Keejo
I am sorry I never received your notification!

Thank you for the tips - I’ve got it up and working;)

Hi @theillustratrice! No problem at all! My pleasure… glad you got it working. Best regards - Kai

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.