CSS3三维透视图

Question

我的CSS 3D透视属性有问题。

<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>

我只想在：hover处设置figcaption的动画，以执行向下折叠的效果（比如http://davidwalsh.name/demo/folding-animation.php)从-90度到0度，考虑到-90度表示块变平（因此不可见）

/** 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);
}

问题是透视图不能为Chrome和Firefox提供相同的渲染。我不得不手动将figcaption默认转换设置为rotateX(-123deg);，这取决于500px的透视值，它在Chrome上运行良好，但在Firefox上运行不好。

理论上，当not：hover时应该是-90度，当：hover则应该是0度，但perspective属性似乎会更改深度场的长度，因此-90度不再有效。

我想知道在使用perspective和rotate时，为了使其在所有最近的浏览器上都能很好地工作，有哪些最佳实践？

致以最良好的问候。

---

PS：只需复制/粘贴HTML&CSS并在Chrome和FF中试用，你应该会立即发现问题所在；）

Answer 1

我知道这不会有帮助，但我个人尝试了一些透视实验，每个浏览器都以不同的方式呈现透视。有些浏览器不支持透视。因此，您的应用程序不是每个人都可以访问的，也许您应该使用另一种技术，直到所有主要浏览器都完全符合透视图。

Answer 2

这个答案可能已经太晚了。

无论如何，使元素不可见的最佳方法是将角度保持在90度，但将透视原点设置在其正上方。（无需计算将获得所需效果的确切角度）

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>