सीएसएस रोटेशन धीमा

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

... काम करता है, लेकिन flips बहुत धीमी गति से, मैं गति बदल सकते हैं?

इसके अलावा, क्या मैं किसी भी तरह चौड़ाई जोड़ सकता हूं ताकि फ्लिप बोर्ड की तरह दिखता हो और पतली कागज न हो? :)

धन्यवाद!

Answer 1

आप पहले से ही गति निर्दिष्ट: 0.3s की तरह कुछ करने के लिए

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

बदलें यह: http://jsfiddle.net/egEq2/1/