谷歌Chrome CSS过渡错误-透视行为奇怪

Question

我想让你看看这个小提琴:

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

请先在Firefox中打开，看看它是如何正常工作的，然后在Chrome中打开，看看它是有bug的。我做错什么了吗?或者它确实是一个bug?

Firefox甚至不需要-moz-来生成过渡和转换。Chrome似乎有一点问题…

我可以有正确的动画在所有的浏览器?Opera，也就是safari ?

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

问题来自于在基本状态中没有透视图集