6

このフィドルを見てほしい：

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 には少し問題があるようです..

すべてのブラウザで正しいアニメーションを表示できますか? オペラ、つまりサファリも？

4

1 に答える 1