Question

我正在尝试创建一个可以＆＃34;旋转＆＃34;通过使用

抓住边缘在3D中

transform: rotateY(# deg);

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

HTML

<div id = "square">
    <div class="LeftRotate" onclick="rotateLeft()"></div>
</div>

的JavaScript

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

有人能解释代码有什么问题吗？它似乎很简单，但它不起作用。此外，我想将其构建为一个更加动态的系统，因此div实际上可以“旋转”＃34;动态地（由用户），而不是仅仅去一个位置。有什么建议？我正在考虑在光标中进行更改，并在for循环中使用它，这会通过光标的变化来增加窗口的旋转。

Answer 1

您可以使用以下代码执行此操作：

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

2.其次，transform需要供应商前缀才能支持旧版本。

3.第三，它需要在document.前面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)";
}

Demo with Inline Styles | Demo with Class

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

奖励示例：这是一个非常粗略的示例，介绍如何根据用户在文本框中提供的输入动态更改旋转角度。只需在文本框中指定一个旋转角度（只是数字），然后点击带有文字的div。

Dynamic Rotation Angle Demo

3D变换div

1 个答案: