用javascript旋转CSS3 3d立方体

Question

I am trying to rotate a 3d cube with two controls - for left and right. When you click on the left button, for example, I'd like to add extra 40 degrees to the rotateY value on the left.

My question is: Since I can't work with exact values (I want everytime to add new values to the existing ones!), I guess I will have to split up the string for the transform into something like this:

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

Here is the pen I am working on:

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

Answer 1

The easiest way to keep track of the rotation is to do it yourself, as jQuery's css() will return the matrix, and then you'll have to calculate that etc. and it's just easier to keep track of the value in an attribute instead.

Keep the value in a data attribute, and increment that together with the css value, and it should be straight forward, and it's accessible from other functions as well.

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

To keep track of the rotation and increment it on each click with JS, this is what you can do :

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

});

As you are using CSS3 transitions, I would tend to use them also to rotate the cube and use JS only to trigger the animation with class changes on click. But as you ask for a JS solution...

Answer 3

Well, since you are changing the angle on only one axis this is not exactly what you are looking for, but it might give you a clue: Css Tricks

I would try to solve the problem completely in the meantime, though!

Answer 4

I'm not sure whether your question is about how to keep do incremental changes (instead of hardcoded ones) or how to find a more elegant way for setting those values.

For the first one, I think the only way is to keep track of rotation values in your JavaScript code: http://codepen.io/anon/pen/dsIgn (I worked on it in Firefox, just change back -moz- to -webkit- .)

Answer 5

You have to declare a variable outside the click function and store the current value there

Then in every click you add 40 to that variable

JS

var currentRotateZ = -50

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