Javascript 三维变换div

我正在尝试创建一个可以通过使用抓取边缘在3D中“旋转”的div

transform: rotateY(# deg);

我当前的设置包括一个div，填充背景色和一个额外的不可见div，该div与左边缘对齐20px。我添加了一个事件处理程序，一旦调用了一个使用getElementById的JavaScript函数，该函数当前只将rotateY设置为60度

HTML

---

有人能解释一下代码的错误吗？它看起来很简单，但不起作用。此外，我还想将其构建到一个更具动态性的系统中，这样div实际上可以（由用户）动态地“旋转”，而不仅仅是移动到某个位置。有什么建议吗？我正在考虑得到光标的变化，并在for循环中使用它，该循环通过光标的变化来增加窗口的旋转。

您可以使用以下代码来完成：

1.首先，该值是一个字符串，因此应在引号中给出

2.其次，

转换

需要供应商前缀来支持旧版本

3.第三，它需要一个

文档。

在

getElementById

前面

function rotateLeft() {
    document.getElementById("square").style["-webkit-transform"]= "rotateY(60deg)";
    document.getElementById("square").style["-moz-transform"]= "rotateY(60deg)";
    document.getElementById("square").style["transform"]= "rotateY(60deg)";
}

|

注意：除非动态生成旋转角度，否则我建议使用类而不是内联样式

额外示例：这是一个非常粗略的示例，介绍如何根据用户在文本框中的输入动态更改旋转角度。只需在文本框中给出旋转角度（仅为数字），然后单击带文本的

div

---

首先需要将

旋转..

放在qutoes中，因为它是一个字符串。其次，我认为应该有一个

文档。get..

。第三，如果角度不是动态的，我更喜欢使用类似的类，因为需要供应商前缀。

function rotateLeft() {
    getElementById("square").style.transform = rotateY(60deg);
}

function rotateLeft() {
    document.getElementById("square").style["-webkit-transform"]= "rotateY(60deg)";
    document.getElementById("square").style["-moz-transform"]= "rotateY(60deg)";
    document.getElementById("square").style["transform"]= "rotateY(60deg)";
}