翻转动画在 Chrome 中可以正常工作，但在 Safari 中不行答案

【问题标题】：Flip animation works OK in Chrome but not in Safari翻转动画在 Chrome 中可以正常工作，但在 Safari 中不行
【发布时间】：2016-01-21 20:45:41
【问题描述】：

我有以下小提琴：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- 前缀，因为它不再需要了

【问题讨论】：

如帖子第9版所述

标签： css google-chrome safari css-transforms

【解决方案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;
}

【讨论】：