Google Chrome CSS przejście bug - perspektywa zachowuje się dziwnie

Question

chciałbym, aby zobaczyć ten skrzypce:

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

Proszę otworzyć pierwszy w Firefoksie, aby zobaczyć, jak działa poprawnie, a następnie otwórz w Chrome, aby zobaczyć w tym jest buggy. Czy zrobiłem coś nie tak? Czy to rzeczywiście błąd?

także Firefox nie trzeba nawet -moz- wygenerować przejścia i przekształca .. Chrome wydaje się mieć trochę jakiś problem ..

mogę mieć poprawną animację we wszystkich przeglądarkach? opera, czyli safari?

Answer 1

spróbuj ustawić tę

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

problem jest z perspektywy nie ma ustawionej w stanie podstawowym