使用JavaScript旋转CSS3 3d立方体

我试图旋转带有两个控件的3D立方体-左右.例如,当您单击左侧按钮时,我想向左侧的rotateY值添加额外的40度.

我的问题是：由于我无法使用精确值(我希望每次都向现有值中添加新值！),我想我必须将转换字符串分割成如下形式：

$(cube).css("-webkit-transform", "rotateX(-100deg) rotateZ(-50deg + add 40 degrees to the existing one!) translateZ(-30px)");

这是我正在使用的笔：

http://codepen.io/gbnikolov/pen/hHEBG

解决方法:

跟踪旋转的最简单方法是自己完成旋转,因为jQuery的css()将返回矩阵,然后您必须计算该值,等等,而在属性中跟踪值更容易.

将值保留在data属性中,然后将其与css值一起增加,它应该是直接的,并且也可以从其他函数访问.

cube.data('rot', -50);

left.click(function(){
  var deg = cube.data('rot') + 40;

  cube.css("-webkit-transform", "rotateX(-100deg) rotateZ("+deg+"deg) translateZ(-30px)");

  cube.data('rot', deg);
});

right.click(function(){
  var deg = cube.data('rot') - 40;

  cube.css("-webkit-transform", "rotateX(-100deg) rotateZ("+deg+"deg) translateZ(-30px)");

  cube.data('rot', deg);
});

CodePen

标签：css3,css-transforms,css,javascript,jquery
来源： https://codeday.me/bug/20191121/2053713.html