Streaming live at 10am (PST)

3D Transform using video/gif


#1

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


#2

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, https://preview.webflow.com/preview/webfonicsolids?preview=0334c0afd98fb464ffd01cedb87e2d19

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


#3

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


#4

@Keejo
I am sorry I never received your notification!

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


#5

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


#6

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