圖像翻轉在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);