CSS conversion error in Google Chrome - strange behavior strange

Question

I would like you to see this 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 ); } 

Please open it in Firefox first to see how it works correctly, and then open it in Chrome to make sure it is buggy. Did I do something wrong? Or is it really a mistake?

Also, Firefox doesn't even need -moz- to create transitions and transformations .. Chrome seems to have a problem.

Can I have the correct animation in all browsers? opera, i.e. safari?

Answer 1

Try to install

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

The problem is the lack of perspective in the base state