CSS3 perspective in 3D - css

Question

I'm having a problem with CSS 3D perspective property.
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>
I just want to animate the figcaption at :hover to perform a folding-down effect (like http://davidwalsh.name/demo/folding-animation.php) from -90deg to 0deg , considering that -90deg represent the block flatten (and so not visible)
/** vendor prefixes have been removed for better readability **/
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 500ms;
transform: rotateX(-123deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
The problem is that perspective does not give the same render for Chrome and Firefox.
I had to set manually the figcaption default transform to rotateX(-123deg); depending of the perspective value which is 500px, and it works well on Chrome, but not on Firefox.
Theoretically, it should be -90deg when not :hover and 0deg when :hover, but seems that the perspective attribute changes the length of the depth field and so -90deg does not works anymore.
I wonder what are the best practices when playing with perspective and rotate in order to make it works well on all recent browsers ?
Best regards.
PS: Just copy/paste the HTML & CSS and try it in Chrome and FF, you should immediately see what's wrong ;)

Answer 1

I know it won't be helpful, but personnaly I tried some experiments with perspective and each browser render the perspective in a different way. Some browsers don't support the perspective. So, your application won't be accesible to everyone, maybe you should use another technology until all of the main browsers are fully compliant with the perspective.

Answer 2

Probably it's too late for this answer to be useful.
Anyway, the best way to make the element invisible is to keep the angle at 90deg, but set the perspective origin to be just above it. (No need to figure the exact angle that will get the desired effect)
figure {
display: inline-block;
position: relative;
line-height: 0;
perspective: 300px;
perspective-origin: top center; /* added this setting */
}
figcaption {
background-color: rgba(0,0,0,0.2);
padding: 20px 10px;
position: absolute;
top: 0;
right: 0;
left: 0;
transition-property: all;
transition-duration: 2s;
transform: rotateX(-90deg);
transform-origin: top;
}
figure img:hover + figcaption {
transform: rotateX(0deg);
}
<figure>
<img src="http://www.saintbioz.fr/wp-content/uploads/2010/02/paysage-montagneux.jpg" width="512" height="384" alt="Landscape" />
<figcaption>Summer in the mountains</figcaption>
</figure>