Google Chrome CSS transition bug - perspective behaving strangely

Question

i would like you to see this fiddle:

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

Please open it first in Firefox to see how it works correctly and then open in Chrome to see that it is buggy. Did i do something wrong? Or it is indeed a bug?

Also Firefox doesn't even need -moz- to generate the transitions and transforms.. Chrome seems to have a bit of a problem there..

Can i have the correct animation in all browsers? opera, ie, safari also?

Answer 1

Try setting this

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

The problem comes from not having a perspective set in the base state