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 Tricks

虽然我会尝试完全解决问题！

Answer 4

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

对于第一个，我认为唯一的方法是跟踪JavaScript代码中的轮换值：http://codepen.io/anon/pen/dsIgn（我在Firefox中使用它，只需将-moz-更改回{{1 }}。）

Answer 5

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

然后在每次点击中，您都会向该变量添加40

JS

var currentRotateZ = -50

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

用javascript旋转CSS3 3d立方体

5 个答案: