在Chrome浏览器翻转正常,但是在Firefox浏览器上,动画翻转之后:卡片第二面的背面设置hidden还是可见。 参考网上尝试将:backface-visibility: hidden; 改成: -webkit-backface-visibility: hidden;
还是没有用。
最后参考其他网友, 只要在最外层父层div加上:-moz-backface-visibility: hidden;即可
.card-inner {
/* 开启3d效果*/
transform-style: preserve-3d;
transition: transform 3s;
-moz-backface-visibility: hidden;
}
最后在FireFox浏览器上运行效果与在Chrome上运行效果终于一样。