4

我遇到了 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 代表块变平（所以不可见）

/** 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 中尝试，您应该会立即看到问题所在；）

4

2 回答 2

1

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

于 2012-07-31T04:04:47.963 回答
1

这个答案可能为时已晚。

无论如何，使元素不可见的最佳方法是将角度保持在 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>

于 2015-06-25T21:49:31.970 回答