3D 中的 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 设置动画以执行从 -90deg 到 0deg 的折叠效果(如 http://davidwalsh.name/demo/folding-animation.php)，考虑到 -90deg 表示 block 变平(因此不可见)

/** 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 上运行不佳。

理论上，当不是 :hover 时它应该是 -90deg，当 :hover 时它应该是 0deg，但似乎 perspective 属性改变了深度场的长度，所以 -90deg 不再起作用。

我想知道在使用 perspective 和 rotate 时最好的做法是什么，以使其在所有最新的浏览器上都能正常工作？

最好的问候。

---

PS:只需复制/粘贴 HTML 和 CSS 并在 Chrome 和 FF 中尝试，您应该立即看到问题所在 ;)

Answer 1

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