Question

我计划对使用javascript的鼠标移动控制的HTML元素（确切地说是rotateY）进行3D转换。这导致所有主流浏览器都可以很好地处理微小的值，但 Firefox 32 （它适用于版本19 ，我更新了它）。

有关演示，请参阅此Fiddle。

以下是发生的事情：

只要 rotateY 值在一定范围内（-0.08＆lt; 值＆gt; 0.08），Firefox就会假定转换 - 来源等于x = 0，即使另外设置。在演示中很难看到，因为值太低，但效果很明显。一旦价值超过上述保证金（向上或向下），转换似乎就会被清除，而 transformation-origin 将被设置为 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>

CSS

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

JS

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

使用带有小值的CSS rotateY转换在FF32中的奇怪行为（JSfiddle）

0 个答案: