控制CSS立方体旋转（变换）并从3d矩阵中提取值

2 回答

• 0

  尝试2的问题是rotateAxisAngle以您想要的对位顺序进行矩阵乘法 . 而且，更糟糕的是，类中没有按照您想要的顺序进行乘法的功能 .

  作为替代方式，我选择使用浏览器本身来进行数学运算 . 我创建了一个隐藏的div，并且我将应用转换来获取新矩阵 .

  使用这种方法，javascript变得更短：

  function applyTransform (transform) {
  
      var cubeCalculator = $('.cubecalculator');
      var cube = $('#cube');
  
      var matrix = cubeCalculator.css('webkitTransform');
      var composite = transform + ' ' + matrix;
      cubeCalculator.get(0).style.webkitTransform = composite;
  
      matrix = cubeCalculator.css('webkitTransform');
      cube.get(0).style.webkitTransform = matrix;
  }
  
  // rotate using arrow keys
  $(document).keyup(function(e) {
  
      e.preventDefault();
  
      var key = e.which,
          arrow = {left: 37, up: 38, right: 39, down: 40},
          t;
  
      switch(key) {
          case arrow.left:
              t = 'rotateY(-90deg)';
          break;
  
          case arrow.right:
              t = 'rotateY(90deg)';
          break;
  
          case arrow.up:
              t = 'rotateX(90deg)';
          break;
  
          case arrow.down:
              t = 'rotateX(-90deg)';
          break;
      }
  
      applyTransform (t);
  
  });
  

  我认为代码是非常自我解释的：我将变换应用于元素作为新变换和当前变换的组合（您不需要从矩阵中提取值，可以按原样应用）

  演示

  （我不知道为什么，它在codepen中没有用 . 把它移到了小提琴......）

  最后我得到了* Firefox的表现！

  function applyTransform (transform1, transform2) {
      var matrix, composite1, composite2;
      var cubeCalculator = $('.cubecalculator');
      var cube = $('#cube');
  
      matrix = cubeCalculator.css('transform');
      composite1 = transform1 + ' ' + matrix;
      composite2 = transform2 + ' ' + matrix;
      cubeCalculator.get(0).style.transform = composite2;
      cube.get(0).style.transition = 'none';
      cube.get(0).style.transform = composite1;
  
      window.setTimeout (function() {
          cube.get(0).style.transform = composite2;
          cube.get(0).style.transition = 'transform 1s';
      }, 10   );
  }
  
  // rotate using arrow keys
  $(document).keyup(function(e) {
  
      e.preventDefault();
  
      var key = e.which,
          arrow = {left: 37, up: 38, right: 39, down: 40},
          t1, t2;
  
      switch(key) {
          case arrow.left:
              t1 = 'rotateY(0deg)';
              t2 = 'rotateY(-90deg)';
          break;
  
          case arrow.right:
              t1 = 'rotateY(0deg)';
              t2 = 'rotateY(90deg)';
          break;
  
          case arrow.up:
              t1 = 'rotateX(0deg)';
              t2 = 'rotateX(90deg)';
          break;
  
          case arrow.down:
              t1 = 'rotateX(0deg)';
              t2 = 'rotateX(-90deg)';
          break;
      }
  
      applyTransform (t1, t2);
  
  });
  

  一点点复杂的代码，但使浏览器完全清楚你想要它做什么...只要你等到过渡结束，工作正常 .

  回复于 2024-04-30T17:02:15+08:00
• 2

  演示2几乎就在那里 . 您的问题是您正在使用多维数据集的中间动画状态来计算新位置：

  var matrix = new WebKitCSSMatrix(cube.css('webkitTransform'));
  

  相反，您应该存储和更新内部目标矩阵：

  此外，似乎这段代码：

  var vector = matrix.transformVector(vector);
  var newMatrix = matrix.rotateAxisAngle(vector.x, vector.y, vector.z, angle);
  

  不按预期工作 . 这就是您正在寻找的：

  var newMatrix = new WebKitCSSMatrix().rotateAxisAngle(...).multiply(matrix)
  

  http://codepen.io/eric-wieser/pen/BoeyD

  回复于 2024-04-30T17:02:15+08:00