Javascript FF32中使用CSS小值旋转变换（JSFIDLE）的奇怪行为

我计划实现HTML元素（确切地说是rotateY）的3D转换，该元素由使用javascript的鼠标移动控制。这导致所有主要浏览器都可以很好地处理极小的值，除了Firefox 32（它与我更新的版本19一起工作）

看这个演示

下面是发生的情况：

只要rotateY值在一定范围内（-0.080.08），Firefox就假定转换原点等于x=0，即使设置为其他值。在演示中很难看到，因为值很低，但效果是明显的。一旦值超过所述裕度（向上或向下），转换似乎被清除，并且转换原点被设置为50%。 应用于动画或鼠标控制的移动，会导致朝向变换中心的非常恼人的抖动

我将非常感谢任何关于这方面的提示或解决方法

干杯

HTML

<div id="base">
    <span id="status"></span>
</div>
<div id="top"></div>
<div class="buttons">
    <button id="smaller" value="-0.1">-0.1</button>
    <button id="muchSmaller" value="-0.01">-0.01</button>
    <button id="bigger" value="+0.1">+0.1</button>
    <button id="muchBigger" value="+0.01">+0.01</button>
</div>

JS

html, body{
    margin:0;
    padding:0;
}
#base, #top{
    width:300px;
    position:absolute;
    top:0;
    left:0;
    background-size:cover;
}
#base{
    height:200px;
    background:url(http://s28.postimg.org/mh21gch0d/base.png) transparent no-repeat 0 0;
    font-size: 30px;
    color:#555;
    padding-top:100px;
    text-align:center;
}
#top{
    height:300px;
    background:url(http://s28.postimg.org/tyb8vk6jh/top.png) transparent no-repeat 0 0;
}
.buttons{
    width:300px;
    padding:20px 0 0;
}
button{
    width:50px;
    height:20px;
    position:relative;
}
#smaller, #muchSmaller{
    float:left;
}
#bigger, #muchBigger{
    float:right;
}

var status=document.getElementById("status");
var top=document.getElementById("top");
var buttons=document.getElementsByTagName("button");
var rotation=0;
for( var i=0,il = buttons.length; i< il; i ++ ){
    buttons[i].onclick = function(){
    rotation=rotation+parseFloat(this.value);
    top.style.transform="perspective(150px) rotateY(" + rotation + "deg)";
    status.innerHTML="Rotation:<br>" + rotation + "deg";
    };
};

var status=document.getElementById（“status”）；
var top=document.getElementById（“top”）；
var buttons=document.getElementsByTagName（“按钮”）；
var旋转=0；
对于（var i=0，il=buttons.length；i”+旋转+deg”；
};
};

附带问题：为什么使用

for（var i=0，il=buttons.length；i@myfunkyside这是以前代码的遗留部分，只是忘了清理它。