翻轉動畫在Safari中不起作用

Question

我制作了一個動畫個人資料圖片，將其懸停時會翻轉並顯示背面。 它可以在Firefox和Chrome中完美運行，但不能在Safari中運行。

它確實會翻轉，但是圖像會變回正面，但朝向相反的方向。

這是我將鼠標懸停在上面一秒鍾后看到的內容。 （這是正面，但水平翻轉）

鏈接： http ： //www.ik-ben-zzp.nl/testsite/index.php

這是個人資料圖片的HTML CSS。

這里有什么問題？

謝謝

PS。 在Safari iPad上測試

 .roundedImage { overflow:hidden; width: 200px; height:200px; margin-left: auto; margin-right: auto; -webkit-animation:pop-in 0.8s; -moz-animation:pop-in 0.8s; -ms-animation:pop-in 0.8s; } .flip-container { perspective: 1000; z-index:3; margin-bottom:200px; } .flip-container:hover .flipper, .flip-container.hover .flipper { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } .flip-container, .front, .back { width: 200px; height: 200px; margin-left:auto; margin-right:auto; } .flipper { transition: 0.6s; -webkit-transition: 0.6s; -ms-transition: 0.6s; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; } .front, .back { backface-visibility: hidden; position: absolute; top: 0; left: 0; } .front { transform: rotateY(0deg); -webkit-transform: rotateY(0deg); -ms-transform: rotateY(0deg); } .back { transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -ms-transform: rotateY(180deg); } .front div, .back div { -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; -webkit-animation:pop-in 0.8s; -moz-animation:pop-in 0.8s; -ms-animation:pop-in 0.8s; border: 4px solid white; } 

 <div class="flip-container" ontouchstart="this.classList.toggle('hover')"> <div class="roundedImage"> <div class="flipper"> <div class="front"> <div style="background: url(Images/ProfileFront.jpg); height:200px; background-size: cover;"></div> </div> <div class="back"> <div style="background:url(Images/ProfileBack.jpg); height:200px; background-size:cover;"></div> </div> </div> <!--FLIPPER--> </div> <!-- ROUNDED IMAGE --> </div> <!-- FLIP CONTAINER --> 

Answer 1

將-webkit-前綴添加到所有必需的CSS屬性。 您錯過了“背面可見性”。

Answer 2

刪除ontouchstart =“ this.classList.toggle（'hover'）;” 在所有div的html中，並在javascript下面添加。 如果您在“前”或“后工作”的div內有任何服務器端可點擊的項目，則可以評論“返回假”

$('.flip-container').click(function(){
    $(this).find('.flipper').addClass('hover').mouseleave(function(){
        $(this).removeClass('hover');
    });
    return false;
});