css - Google Chrome CSS 过渡错误 - 透视表现异常

Question

我希望你能看到这个 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 );
}

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

此外，Firefox 甚至不需要 -moz- 来生成转换和转换。Chrome 似乎在那里有点问题。

我可以在所有浏览器中使用正确的动画吗？歌剧，也就是 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 );
}

问题来自于没有在基本状态下设置透视图