How to make this Flipping card happen in the xara web designer?

[alexia36]

Siran,

I have a big problem, I need to use your effort widget on Wed Designer 10, what should I do right now?
Best,

Alexia

[siran]

I still have V10 installed on my home computer and will have a look at it this weekend.

[alexia36]

Siran,

Many Many Thanks!

Best,

Aleixa

[siran]

This should work in V10 and later. Please report if it doesn't.

[alexia36]

Siran,

I appreciate your helps. I will try and let you know the result.
Best,

Alexia

[wfcentral]

not quite sure I 100% understand all that is going on here... so, I dug through the widget looking for the CSS and did not find it.

The reason I was looking is because this looked very interesting - so, I downloaded the widget to try it out and saw that the image "flips" but it does not do the perspective change. If you go back to the original website sample given and watch the image actually maintains perspective as it flips making it look like the edge coming toward you is larger than the edge moving away from you...

Anyway - I copied the CSS from the website and pasted it into my Xara head code area with some <style> tags around it and now the perspective does work for me...

[siran]

I might have messed it. To allow to change the speed I made some changes. And also the flipping back did not look right in Firefox so I made some more changes, maybe these cause the problems.

[alexia36]

Siran,

Couldn't work here. no flipping as before??

Best,

Alexia

[siran]

That's strange Alexia. Are you on a different computer where you have IE9 installed? This widget (and the demo on the linked page) will not work in IE9 or older.
Works fine for me except for the effect wfcentral described (but that is also true for the demo page) and that Opera flips instantly sometimes (which the demo page also does, but not so often).

[alexia36]

Siran,

I tested on the IE11, Chrome and firefox, the screen was white, nothing happened.

Alexia