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

...工作，但翻轉速度太慢，我可以改變的速度？

此外，我可以增加寬度，所以翻轉看起來像一個板，而不是一個薄紙？ :)

謝謝！

Answer 1

您所指定的速度已經：

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

它更改爲類似0.3s：http://jsfiddle.net/egEq2/1/