html - 3D 转换卡翻转动画不适用于 chrome

Question

我正在使用 CSS 3D Transform Card Flip Animation .它在所有浏览器上运行良好，但现在停止在 chrome 上运行。 3D 效果现在不起作用。

CSS:

.thumb.flip {
    -webkit-perspective:800px;
       -moz-perspective:800px;
        -ms-perspective:800px;
         -o-perspective:800px;
            perspective:800px;
}

.thumb.flip .thumb-wrapper {
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
        -ms-transition: -moz-transform 1s;
         -o-transition: -moz-transform 1s;
            transition: -moz-transform 1s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

.thumb.flip .thumb-detail {
    -webkit-transform: rotateY(-180deg);
       -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
         -o-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

.thumb.flip img, .thumb.flip .thumb-detail {
    -webkit-backface-visibility: hidden;
       -moz-backface-visibility: hidden;
        -ms-backface-visibility: hidden;
         -o-backface-visibility: hidden;
            backface-visibility: hidden;
}

.thumb.flip .flipIt {
    -webkit-transform: rotateY(-180deg);
       -moz-transform: rotateY(-180deg);
        -ms-transform: rotateY(-180deg);
         -o-transform: rotateY(-180deg);
            transform: rotateY(-180deg);
}

知道我做错了什么或为什么它停止工作了吗？谢谢

这是 fiddle 中的工作链接

Answer 1

更改此 CSS:

.thumb.flip .thumb-wrapper {
    -webkit-transition: -webkit-transform 1s;
       -moz-transition: -moz-transform 1s;
        -ms-transition: -moz-transform 1s;
         -o-transition: -moz-transform 1s;
            transition: -moz-transform 1s;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

与:

.thumb.flip .thumb-wrapper {
    -webkit-transition: transform 1s; //Changed
       -moz-transition: transform 1s; //Changed 
        -ms-transition: transform 1s; //Changed
         -o-transition: transform 1s;//Changed
            transition: transform 1s; // Changed
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
         -o-transform-style: preserve-3d;
            transform-style: preserve-3d;
}