3D中的3D透视

我遇到了CSS 3D透视属性的问题。3D中的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：悬停从-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上无效。

理论上，当不是时：-hdeg应该是-90deg：hover和0deg在：hover时，但似乎perspective属性改变了深度字段的长度，所以-90deg不再有效。

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

此致敬礼。

PS：只要复制/粘贴HTML & CSS和尝试在Chrome和FF，你应该立即看到什么是错;）

来源

2012-07-30 jmpp

我知道这不会是有益的，但personnaly我试着一些透视的实验和每个浏览器都以不同的方式呈现视角。有些浏览器不支持这个观点。所以，你的应用程序不会被所有人使用，也许你应该使用另一种技术，直到所有主要浏览器完全符合这个观点。

来源

2012-07-31 04:04:47 JBENOIT

您好，感谢回答。我的目标是在浏览器上按预期工作，而不管其他浏览器如何处理。 – jmpp 2012-07-31 09:54:49

提醒：现在是2016年.... – 2016-07-20 17:32:34

也许这个答案很有用，太晚了。

无论如何，使元素隐形的最佳方式是将角度保持在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-25 21:49:31 vals

3D中的3D透视

回答

相关问题