Question

为我的个人网站制作一张翻转卡，在悬停时在两张照片之间翻转。尽管有所有供应商前缀，但在Chrome中工作正常但在Safari中无法正常工作。关于我做错了什么建议？

HTML：

<center><div class="flip-container" ontouchstart="this.classList.toggle('hover');">
<div class="flipper">
    <div class="front">
        <img src="http://i1299.photobucket.com/albums/ag62/Liz_Reddinger/name%20title4_zpslapxhev7.png" width="220px" draggable="false">
    </div>
    <div class="back">
        <img src="http://i1299.photobucket.com/albums/ag62/Liz_Reddinger/unnamed_zpsbjazifcu.png" width="170px" draggable="false">
    </div>
</div>

CSS：

.flip-container {
    perspective: 1000;
    margin-top:-300px;
}
.flip-container:hover .flipper, .flip-container.hover .flipper {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    }

.flip-container, .front, .back {
    width: 320px;
    height: 480px;
}
.flipper {
    -webkit-transition: 1.2s;
    -moz-transition: 1.2s;
    transition: 1.2s;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: relative;
}
.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    position: relative;
    top: 0;
    left: 0;
}
.front {
    z-index: 2;
    -moz-transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
    margin-top:5px;
}
.back {
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    transform: rotateY(-180deg);
    margin-top:10px;
}

这似乎是一个简单的问题，但我很容易陷入困境。我在另外几篇文章中看到了关于定义百分比的细致，但我没有在这里使用它们。

翻转卡的CSS3动画在Safari

0 个答案: