使用javascript旋转CSS3 3d多维数据集

我正在尝试用两个控件旋转一个3d立方体-左控件和右控件。例如，当您单击左侧按钮时，我想为左侧的rotateY值添加额外的40度

我的问题是：由于我无法处理精确的值（我希望每次都向现有值添加新值！），我想我必须将转换的字符串拆分为如下内容：

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

这是我正在使用的笔：

---

好吧，因为你只改变了一个轴上的角度，这并不完全是你想要的，但它可能会给你一个线索：

---

不过，在此期间，我会尽力彻底解决这个问题

我不确定您的问题是关于如何保持增量更改（而不是硬编码更改），还是如何找到一种更优雅的方法来设置这些值

---

对于第一个问题，我认为唯一的方法是跟踪JavaScript代码中的旋转值：（我在Firefox中处理过它，只需将

-moz-

更改为

-webkit-

）

要跟踪旋转并在每次单击JS时递增，您可以这样做：

jQuery：

---

当您使用CSS3转换时，我倾向于使用它们来旋转立方体，并使用JS仅在单击时触发类更改的动画。但是当你要求一个JS解决方案时…

跟踪旋转的最简单方法是自己做，因为jQuery的

css（）

将返回矩阵，然后你必须计算它，等等。相反，跟踪属性中的值更容易

将该值保留在数据属性中，并与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);
});

---

您必须在click函数之外声明一个变量，并将当前值存储在该函数中

然后在每次单击中，向该变量添加40

JS

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);
});

var currentRotateZ = -50

left.click(function(){
    $(cube).css("-webkit-transform", "rotateX(-100deg) rotateZ(" + (currentRotateZ += 40) + "deg) translateZ(-30px)");
});