图像翻转在Safari中不起作用

Question

我目前正在检查浏览器对我的投资组合的支持，并注意到图片翻转在Safari中无法正常工作。还有其他人遇到过这个问题吗？

#effect-2 figure figcaption {
top: 15px;
left: 0;
width: 100%;
height: 100%;
background-color: #226181;
text-align: center;
backface-visibility: hidden;
transform: rotateY(-180deg);
transition: all 0.8s; 
}

解决方案（添加webkit）：

#effect-2 figure figcaption {
top: 15px;
left: 0;
width: 100%;
height: 100%;
background-color: #226181;
text-align: center;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transform: rotateY(-180deg);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transition: all 0.8s;
}

Answer 1

您是否尝试过使用所有浏览器前缀？

-webkit-transform: rotateY(0);
-moz-transform: rotateY(0);
-ms-transform: rotateY(0);
transform: rotateY(0);