3D中的CSS3透视图

2023年8月6日 140次阅读

我遇到了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：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不再起作用.

我想知道在使用透视和旋转时最佳做法是什么,以使其在所有最近的浏览器上都能正常工作？

最好的祝福.

PS：只需复制/粘贴HTML& CSS并在Chrome和FF中试用,你应该立即看到错误;)

最佳答案 我知道它没有帮助,但是我个人尝试了透视图并且每个浏览器以不同的方式渲染透视图.有些浏览器不支持透视.因此,您的应用程序将无法被所有人访问,也许您应该使用其他技术,直到所有主要浏览器完全符合透视图.

点赞