3D Transform Card Flip Анимация не работает для хрома

Question

Я использую CSS 3D Transform Card Flip Animation. Он работал нормально во всех браузерах, но теперь он переставал работать на хроме. 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; 
}