/ / La animación 3D Flip Card Card Flip no funciona para Chrome - html, css

La animación 3D Transform Card Flip no funciona para Chrome - html, css

estoy usando CSS 3D Transform Card Animación de volteo. Funcionaba bien en todos los navegadores, pero dejó de funcionar en Chrome ahora. El efecto 3D no funciona ahora.

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

¿Alguna idea de lo que estoy haciendo mal o por qué esto dejó de funcionar? Gracias

Aquí está el enlace de trabajo en violín

Respuestas

0 para la respuesta № 1

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

Con :

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