CSS lenta

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

... funziona, ma gira troppo lento, posso cambiare la velocità?

Inoltre, posso aumentare la larghezza in qualche modo in modo che il flip assomigli a una scheda e non a una carta sottile? :)

Grazie!

Answer 1

si è specificato la velocità già:

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

Cambiare a qualcosa come 0.3s: http://jsfiddle.net/egEq2/1/