Question

我成功创建了一个用户可以“旋转”的div。它完美地工作，除了在X方向上旋转取消/重置Y方向上的现有旋转，反之亦然。 div也是jQuery的可拖动对象。如何修复此问题以便不重置转换？

<script>
var degreesY = 0; 
function rotateLeft() {
    var degreesuseY = degreesY + 10; 
    document.getElementById("Notes").style["transform"]= "rotateY(" + degreesuseY + "deg)";
}

var degreesX = 0; 
function rotateUp() {
    var degreesuseX = degreesX + 10; 
    document.getElementById("Notes").style["transform"]= "rotateX(" + degreesuseX + "deg)";
}
</script>

<div id="draggable">
    <div class="LeftRotate" onclick="rotateLeft();degreesY=degreesY+10"></div>
    <div class="UpRotate" onclick="rotateUp();degreesX=degreesX+10"></div>
 </div>

Answer 1

问题在于，当您设置transform属性时，您将重写当前值并删除到目前为止所拥有的内容。尝试使用单个rotate()函数更改代码，然后按如下所示设置transform属性：

var degreesX = 0;
var degreesY = 0;
function rotate(xAxis) { //Make xAxis a boolean
    if (xAxis) {
        degreesX+=10;
    } else {
        degreesY+=10;
    }
    document.getElementById("Notes").style["transform"] = "rotate(" + degreesX + "deg " + degreesY + "deg)";
}

我在this jsFiddle中添加了一个简单的例子（使用jQuery）。

如果您愿意，可以通过让函数确定单击的元素是否具有类UpRotate或LeftRotate来避免使用xAxis。

3D div转换重置

1 个答案: