effetto flip3D, basato su una animazione css- funziona solo su firefox

[surferbloggy]

Ciao ho fatto un effetto flip 3D su div, basato su una animazione css

@keyframes flip {
  0% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

  }

che funziona si, ma solo su firefox, mi aiutate a renderlo cross browser??cosa manca per gli altri browser? grazie dell'aiuto
questo è il codice

    
.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -webkit-transform:perspective(1000px);
    
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d; 

    border: 0px solid #ccc;
    width:100%;
    height:100%;
    font-family: arial;
}

        

            
/* END: Accommodating for IE */


    


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    
    width:100%;
    height:100%;
    
}

.front {
            
    /*background: lightgreen;*/
    z-index: 2;
}

.back {
   /* background: lightblue;*/
            margin-left: 0 auto;
    margin-right: 0 auto;
}

.front .name {
    font-size: 2em;
    display: inline-block;
    background: rgba(33, 33, 33, 0.9);
    color: #f8f8f8;
    font-family: Courier;
    padding: 5px 10px;
    border-radius: 5px;
    bottom: 60px;
    left: 25%;
    position: absolute;
    text-shadow: 0.1em 0.1em 0.05em #333;
    display: none;

    -webkit-transform: rotate(-20deg);
    -moz-transform: rotate(-20deg);
    -ms-transform: rotate(-20deg);
    transform: rotate(-20deg);
}



        
    
    
@keyframes flip {
  0% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;

  }

  
  50% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -ms-transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    transform: perspective(400px) translateZ(0) rotateY(-90deg) scale(.75);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }

  100% {
      
    -webkit-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -ms-transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    transform: perspective(400px) translateZ(0) rotateY(0deg) scale(.99);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
 
  }
}

.animated.flip {
    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
}
    
.back{
    

    
    -webkit-animation: flip 8.5s 1; /* Safari 4+ */
    -moz-animation:    flip 8.5s 1; /* Fx 5+ */
    -o-animation:      flip 8.5s 1; /* Opera 12+ */
    animation:         flip 8.5s 1; /* IE 10+ */
        
    -webkit-animation-fill-mode:forwards;
    -moz-animation-fill-mode:forwards;
    animation-fill-mode:forwards;
    display: none;  
} 
    
/*////////////////////////*/
    /*demo div element to flip*/
 
#pop1{
    width:600px;
    height:500px;  
}

[MAeSI]

Ciao,

poi magari non funziona ugualmente, ma potresti provare ad inserire le proprietà con i prefissi all'interno di keyframes con analogo prefisso, cioè tanti keyframes quanti sono i prefissi. Esempio:

@keyframes flip {
    0% {
        transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
        animation-timing-function: ease-out;
        }
        
    [...]
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(-180deg) scale(1);
        -webkit-animation-timing-function: ease-out;
    }

[...]

}

[surferbloggy]

grazie il problema è che sembra che ci sono gia non so cosa manca di preciso, li ci sono gia

[MAeSI]

li ci sono gia

Nel codice che hai postato non mi sembra.

Mi riferisco a questo:

@-prefissi-keyframes flip {
-prefissi-proprietà: valore;
}

Quindi quale codice stai effettivamente provando?
Un link per vedere qualcosa?

[surferbloggy]

Nel codice che hai postato non mi sembra.

Mi riferisco a questo:

@-prefissi-keyframes flip {
-prefissi-proprietà: valore;
}

si non ti avevo capito, cosi funziona anche su chrome e safari grazie milleciao