Question

我得到了这个CSS动画，它将图像翻转到另一个图像，这是我从这个论坛获得帮助后如何添加供应商前缀以使其在Safari中工作的真棒。不幸的是它仍然无法在Iphone上运行:(

任何人都知道如何解决这个问题？

CODE：

<body>
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
        <div class="flipper">
            <div class="front">
                <img src="https://placekitten.com/600/332">
            </div>
            <div class="back">
                <img src="https://placekitten.com/600/331">
            </div>
        </div>
    </div>
</body>

CSS：

@-webkit-keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}

@keyframes flip {
from { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); }
to { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}


/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
}

.flip-container, .front, .back {
width: 600px;
height: 332px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}

/* flip speed goes here */
.flipper {
transition: 1s;
transform-style: preserve-3d;
position: relative;
-webkit-animation-name: flip;
animation-name: flip;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-delay: 3s;
animation-delay: 3s;
}

/* hide back of pane during swap */
.front, .back {
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
-webkit-backface-visibility: 1000px;
}

/* front pane, placed above back */
.front {
background: white;
z-index: 2;
/* for firefox 31 */
transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
transform: rotateY(180deg);
background: white;
}

Answer 1

您应该检查并应用所有必需属性的供应商前缀（例如透视，变换样式，转换）。

此外，您应该将单位添加到透视属性（例如：-webkit-perspective：1000px）。

实际上，为了防止供应商前缀的代码重载，请使用 -prefix-free javascript库。

当您使用 -Prefix-free javascript库时，您不关心供应商前缀。

官方网站在这里：http://leaverou.github.io/prefixfree/

Answer 2

删除html中所有div中的ontouchstart="this.classList.toggle('hover');"，然后在javascript下面添加。

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

CSS动画（翻转）不适用于Iphone / Safari

2 个答案: