CSS luân chuyển chậm

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

... hoạt động, nhưng flips quá chậm, tôi có thể thay đổi tốc độ?

Ngoài ra, tôi có thể thêm chiều rộng bằng cách nào đó để lật trông giống như một bảng và không phải là một tờ giấy mỏng? :)

Cảm ơn!

Answer 1

Bạn xác định tốc độ đã:

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

Thay đổi nó để cái gì đó như 0.3s: http://jsfiddle.net/egEq2/1/