गूगल क्रोम सीएसएस संक्रमण बग - परिप्रेक्ष्य अजीब तरीके से व्यवहार

Question

मैं चाहते हैं तो आप इस बेला को देखने के लिए:

http://jsfiddle.net/qkwkb/7/

एचटीएमएल

<input id="rad1" type="radio" name="rad" checked>FLAT 
<input id="rad2" type="radio" name="rad">3D 
<div id="portrait"></div> 

सीएसएस

#portrait{ 
margin-bottom:0px; 
margin-top:20px; 
width:300px; 
height:200px; 
background-color:#000; 
transition: transform 2s, margin 1s; 
-webkit-transition: -webkit-transform 2s, margin 1s; 
} 

input[type='radio']:checked + #portrait{ 
margin-left:50px!important; 
transform: perspective(700px) rotateY(30deg); 
-webkit-transform: perspective(700px) rotateY(30deg); 
} 

कृपया पहले उसे खोलने फ़ायरफ़ॉक्स में यह देखने के लिए कि यह सही तरीके से कैसे काम करता है और फिर देखने के लिए क्रोम में खोलें उस पर छोटी गाड़ी है। क्या मैंने कुछ गलत किया? या यह वास्तव में एक बग है?

इसके अलावा फ़ायरफ़ॉक्स भी -moz- की जरूरत नहीं है संक्रमण उत्पन्न करने के लिए और बदल देती है .. क्रोम वहाँ एक समस्या का एक सा है लगता है ..

मैं सभी ब्राउज़रों में सही एनीमेशन मिल सकता है? ओपेरा, यानी सफारी भी?

Answer 1

इस

#portrait{ 
    margin-bottom:0px; 
    margin-top:20px; 
    width:300px; 
    height:200px; 
    background-color:#000; 
    transition: transform 2s, margin 1s; 
    -webkit-transition: -webkit-transform 2s, margin 1s; 
    transform: perspective(700px); 
    -webkit-transform: perspective(700px); 
} 

समस्या सेट करने का प्रयास एक परिप्रेक्ष्य आधार राज्य