图像翻转在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);