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>

我只想动画figcaption at：hover执行折叠效果（如http://davidwalsh.name/demo/folding-animation.php）从-90deg到0deg，考虑到-90deg代表块变平（因此不可见）

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

理论上，它不应该是-90deg：hover和0deg：hover时，但似乎perspective属性会改变深度字段的长度，因此-90deg不再起作用。

我想知道在使用perspective和rotate时最佳做法是什么，以使其在所有最近的浏览器中都能正常使用？

最好的问候。

PS：只需复制/粘贴HTML＆amp; 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>

3D中的CSS3透视图

2 个答案: