Question

我希望你能看到这个小提琴：

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似乎有点问题..

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

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

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

谷歌Chrome CSS过渡错误 - 透视表现奇怪

1 个答案: