Google Chrome CSS 过渡错误 - 透视行为异常答案

【问题标题】：Google Chrome CSS transition bug - perspective behaving strangelyGoogle Chrome CSS 过渡错误 - 透视行为异常
【发布时间】：2013-06-02 11:37:10
【问题描述】：

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

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？

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

我可以在所有浏览器中都有正确的动画吗？歌剧，也就是野生动物园？

【问题讨论】：

请提供您测试过的浏览器版本 - 只是为了完整性。
Firefox 21.0 和 Google Chrome 27.0.1453.94 m 我刚刚更新到 27.0.1453.110 m 但仍然没有运气..

标签： css google-chrome webkit transform transition

【解决方案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 );
}

问题出在基础状态中没有设置透视图

【讨论】：