CSS powolny

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

... działa, ale odwraca zbyt powolny, mogę zmienić prędkość?

Czy mogę dodać szerokość w jakiś sposób, aby klapka wyglądała jak deska, a nie cienki papier? :)

Dzięki!

Answer 1

Określono szybkość już:

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

zmienić go na coś takiego 0.3s: http://jsfiddle.net/egEq2/1/