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;
}