CSS3 rotateY направление светлячок

Question

Первый раз разместить здесь ...

У меня есть проблемы с CSS3 rotateY()

JSFiddle: http://jsfiddle.net/EstSiim/2sKZR/

Все работает отлично с Chrome, IE10, но в Firefox что-то странно. Когда вы щелкаете повернуть или вращать + много раз быстрее, вы можете видеть, что он работает неправильно. (изменения направления вращения)

Это ошибка в Firefox?

Tnx

HTML:

<div class="orange"></div> 
<input type="button" value="RotateY +" class="rotatey-plus"> 
<input type="button" value="RotateY -" class="rotatey-min"> 

CSS:

.orange { 
    margin: 60px; 
    width: 200px; 
    height: 200px; 
    border:1px solid black; 
    border-radius: 6px; 
    background-color: orange; 
    -webkit-transition: all 1s ease-in-out; 
    transition: all 1s ease-in-out; 

    -webkit-transform-origin:50% 50% 100px; 
    transform-origin:50% 50% 100px; 

} 

JS:

var positions = { 
     ydeg:0, 
     pers:400, 
    }; 



    $('.rotatey-plus').on('click', function(){ 
     positions.ydeg += 90; 
     rotate(); 
    }); 
    $('.rotatey-min').on('click', function(){ 
     positions.ydeg -= 90; 
     rotate(); 
    }); 

    function rotate() { 
     $('.orange').css({ 
      '-webkit-transform': 'perspective('+ positions.pers + 'px) rotateY(' + positions.ydeg + 'deg)', 
      'transform': 'perspective('+ positions.pers + 'px) rotateY(' + positions.ydeg + 'deg)' 
     }); 
    } 

Answer 1

Это ошибка, что происходит только тогда, когда вы используете функцию в перспективе.

Если вы используете свойство в перспективе в родительском, он работает нормально:

<div class="container"><div class="orange"></div></div> 

.container { 
    perspective: 1000px; 
} 


function rotate() { 
    $('.orange').css({ 
    'transform': 'rotateY(' + positions.ydeg + 'deg)' 
    }); 
} 

demo