Google Chrome CSS transizione bug - prospettiva comporta in modo strano

Question

vorrei di vedere questo violino:

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

Si prega di aprirlo prima in Firefox per vedere come funziona correttamente e quindi aprire in Chrome per vedere th a questo è buggy. Ho fatto qualcosa di male? O è davvero un bug?

anche Firefox non ha nemmeno bisogno -moz- per generare le transizioni e trasforma .. Chrome sembra avere un po 'un problema lì ..

posso avere la giusta animazione in tutti i browser? opera, cioè anche safari?

Answer 1

l'impostazione di questa

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

Il problema Try deriva dal non avere un punto di vista impostato nello stato di base