Google Chrome CSS Übergang bug - Perspektive seltsam

Question

verhalten möchte ich Ihnen diese Geige sehen:

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

HTML

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

CSS

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

Bitte öffnen Sie es zuerst in Firefox zu sehen, wie es richtig funktioniert und dann in Chrome öffnen, um zu sehen, th Es ist fehlerhaft. Habe ich etwas falsch gemacht? Oder ist es in der Tat ein Fehler?

Auch Firefox braucht nicht einmal -moz- die Übergänge zu erzeugen und verwandelt .. Chrome ein bisschen ein Problem zu haben scheint ..

Kann ich die richtige Animation in allen Browsern? Oper, also auch Safari?

Answer 1

Versuchen Sie, diese kommt

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

Das Problem Einstellung von nicht eine Perspektive festgelegt in den Grundzustand