CSS Rotation langsam

Question

http://jsfiddle.net/egEq2/

.badge { 
    -webkit-transform-style: preserve-3d; 
    -webkit-perspective: 1000; 
    position: relative; 
} 
.back, .front { 
    position: absolute; 
    -webkit-backface-visibility: hidden; 
    -webkit-transition: -webkit-transform 1s ease-in; 
    width: 100%; 
    height: 100%; 
} 
.back { 
    -webkit-transform: rotateY(180deg); 
    overflow: hidden; 
} 
.front { 
} 
.product-action { 
    display: inline-block; 
} 
.product-action:hover .back { 
    -webkit-transform: rotateY(0deg); 
} 
.product-action:hover .front {  
    -webkit-transform: rotateY(-180deg); 
}​ 

... funktioniert, aber Flips zu langsam ist, kann ich die Geschwindigkeit ändern?

Kann ich auch irgendwie Breite hinzufügen, so dass der Flip wie ein Brett aussieht und kein dünnes Papier? :)

Danke!

Answer 1

Sie angegeben, die Geschwindigkeit bereits:

-webkit-transition: -webkit-transform 1s ease-in; 
             ^^ 

ändern es so etwas wie 0.3s: http://jsfiddle.net/egEq2/1/