JavaScript-3D变换div

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

transform: rotateY(# deg);

我当前的设置涉及一个div,其中填充了背景色,另外还有一个不可见的div,它与左边缘对齐20px.我添加了一个事件处理程序,onclick调用了一个使用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实际上可以动态(由用户)“旋转”,而不是仅仅定位.有什么建议吗？我正在考虑获取光标中的更改,并在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)";
}

Demo with Inline Styles | Demo with Class

注意：除非动态生成旋转角度,否则我建议使用类而不是嵌入式样式.

奖励示例：这是一个非常粗略的示例,说明如何根据用户在文本框中提供的输入来动态更改旋转角度.只需在文本框中输入旋转角度(仅数字),然后单击带文本的div.

Dynamic Rotation Angle Demo

标签：css3,css-transforms,css,html,javascript
来源： https://codeday.me/bug/20191029/1959157.html