rotación lenta CSS

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

... funciona, pero que pasa demasiado lento, se puede cambiar la velocidad?

Además, ¿puedo agregar ancho de alguna manera para que la tapa parezca una tabla y no un papel delgado? :)

Gracias!

Answer 1

Ha especificado la velocidad ya:

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

cambio a algo así como 0.3s: http://jsfiddle.net/egEq2/1/