翻轉動畫可以在Chrome中正常運行，但不能在Safari中運行

Question

我有以下小提琴： http : //jsfiddle.net/mauricederegt/hy2dvL1u/43/

當您在Chrome中打開該卡並單擊該卡時，它將翻轉並移至右側。 在Chrome中看起來還可以，但是當我在Safari（v9）中執行此操作時，動畫有點爛（它具有剪切等功能，請點擊更快以更好地查看內容）

CSS的一部分（請參見小提琴中的全部內容）：

/* entire container, keeps perspective */
.flip-container {
    perspective: 1000;
    transform-style: preserve-3d;
}
    /*  UPDATED! flip the pane when .flipped class applied */
    .flip-container.flipped .back {
        transform: rotateY(0deg);
    }
    .flip-container.flipped .front {
        transform: rotateY(180deg);
    }

.flip-container, .front, .back {
    width: 7.1428rem;
    height: 10rem;
}

/* flip speed goes here */
.flipper {
    transition: 200ms;
    transform-style: preserve-3d;

    position: relative;
}

我想念什么？ 為什么Safari中的翻轉動畫如此糟糕？

親切的問候，

ps。 我不使用-webkit-前綴，因為不再需要它

Answer 1

試試吧

/* entire container, keeps perspective */

.flip-container {
    perspective: 1000;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

/*  UPDATED! flip the pane when .flipped class applied */
    .flip-container.flipped .back {
    -webkit-transform: rotateY(0deg);
    transform: rotateY(0deg);
}
.flip-container.flipped .front {
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-container, .front, .back {
    width: 7.1428rem;
    height: 10rem;
}

/* flip speed goes here */
.flipper {
    -webkit-transition: 200ms;
    transition: 200ms;

    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;

    position: relative;
}