用javascript旋转CSS3 3d立方体

Question

我试图用两个控件旋转一个三维立方体 - 左和右。 例如，当您单击左键时，我想在左侧的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

Answer 1

跟踪旋转的最简单方法是自己动手，因为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);
});

CodePen

Answer 2

要跟踪旋转并在每次单击时使用JS增加它，您可以执行以下操作：

jQuery：

var btn = $('.nav'),
    body = $('body'),
    cube = $(".cube"),
    left = $('.left'),
    v_transZ = -40 ;

// REST OF YOUR jQuery CODE

left.click(function(){
  v_transZ = v_transZ - 10;
  var counter = 0,
      v_trans = 'rotateX(-100deg) rotateZ('+ v_transZ +'deg) translateZ(-30px)';

  $(cube).css("-webkit-transform", v_trans);

});

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

Answer 3

好吧，因为你只在一个轴上改变角度，这不是你想要的，但它可能会给你一个线索： Css技巧

不过，我会尝试在此期间完全解决问题！

Answer 4

我不确定您的问题是关于如何继续进行增量更改（而不是硬编码更改）或如何找到更优雅的方式来设置这些值。

对于第一个，我认为唯一的方法是跟踪JavaScript代码中的旋转值： http ： -moz- （我在Firefox中工作过，只需将-moz-更改为-webkit- 。）

Answer 5

您必须在click函数之外声明一个变量并在那里存储当前值

然后在每次单击时，将40添加到该变量

JS

var currentRotateZ = -50

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