javascript-如何使侧面元素在此动画中的x轴上旋转？

我正在尝试构建一个旋转的立方体动画,其侧面也将在各自的轴上旋转.这是我到目前为止的内容：

http://codepen.io/Chevex/pen/pxtwj

以下CSS规则控制每个动画之前的边的位置：

.front {
  transform: translateZ(100px);
  background-color: #0f0;
}
.back {
  transform: rotateY(180deg) translateZ(100px);
  background-color: #f00;
}
.right {
  transform: rotateY(90deg) translateZ(100px);
  background-color: #00f;
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: #ff0;
}
.top {
  transform: rotateX(90deg) translateZ(100px);
  background-color: #0ff;
}
.bottom {
  transform: rotateX(-90deg) translateZ(100px);
  background-color: #f0f;
}

这样效果很好,并相应地放置了元素.接下来,我使用GSAP animation library旋转整个多维数据集：

TweenMax.to($('.cube'), 7, { rotationY: 360, repeat: -1, ease: Linear.easeNone });

之后,我对前后两侧进行动画处理,使它们相对于Z轴旋转：

TweenMax.to($('.front, .back'), 2, { rotationZ: 360, repeat: -1, ease: Linear.easeNone });

接下来是Y轴的顶部和底部：

TweenMax.to($('.top, .bottom'), 2, { rotationY: 360, repeat: -1, ease: Linear.easeNone });

到现在为止还挺好.现在左右两侧需要在X轴上旋转：

TweenMax.to($('.right, .left'), 2, { rotationX: 360, repeat: -1, ease: Linear.easeNone });

现在有一个问题.由于某些原因,它们似乎在Z轴上旋转.我已经尝试过在所有3个轴上旋转它们,但是它们似乎从来没有像其他硬币一样好地旋转,就像旋转的硬币一样旋转.我以为这是一个GSAP错误,但是我将以下CSS动画手动应用于这些方面,并且存在相同的问题.

.right {
  transform: rotateY(90deg) translateZ(100px);
  background-color: #00f;
  -webkit-animation: spinRight 2s linear infinite;
}
.left {
  transform: rotateY(-90deg) translateZ(100px);
  background-color: #ff0;
  -webkit-animation: spinLeft 2s linear infinite;
}

@-webkit-keyframes spinRight {
  from {
    transform: rotateY(90deg) translateZ(100px) rotateX(0deg);
  }
  to {
    transform: rotateY(90deg) translateZ(100px) rotateX(360deg);
  }
}

@-webkit-keyframes spinLeft {
  from {
    transform: rotateY(-90deg) translateZ(100px) rotateX(0deg);
  }
  to {
    transform: rotateY(-90deg) translateZ(100px) rotateX(360deg);
  }
}

任何想法为什么会这样？如何使多维数据集的左侧和右侧以其他所有旋转方式旋转？

解决方法:

是的,您是gimbal locked,需要将rotateX值放置在rotateY之前.顺序对于转换很重要.

您的情况是,Y轴旋转90度(正向或负向)会将X轴旋转到Z轴(或-Z轴).通常,当您全部拥有3个时,对X,Y和Z进行排序将使X保持直线,但是当Y为/-90或270时Z会进行万向锁定.通过将X放在Y之后,可以将其旋转到Z轴上(以该顺序在Y轴“内部”).

尝试这个：

@-webkit-keyframes spinRight {
  from {
    transform: rotateX(0deg) rotateY(90deg) translateZ(100px);
  }
  to {
    transform: rotateX(360deg) rotateY(90deg) translateZ(100px);
  }
}

@-webkit-keyframes spinLeft {
  from {
    transform: rotateX(0deg) rotateY(-90deg) translateZ(100px);
  }
  to {
    transform: rotateX(360deg) rotateY(-90deg) translateZ(100px);
  }
}

如果这样做不能解决问题,请尝试嵌套一个div并旋转该div的Z轴. CSS的3d能力有限,因为万向节锁定是一个巨大的问题.而且,rotate3d由于正弦波和余弦波的360度周期而受到限制(与确定矩阵的数学有关).对于矩阵数学Sylvester有用,或者您可以签出three.js,它具有自己的功能来应对上述限制(我相信Google为其Rubik的立方涂鸦使用了三个).

从问题作者编辑：

这个答案是正确的. Greensock的人们希望我将侧面元素嵌套在父元素中并修改父轴.那可能行得通,但是我最初的尝试只是引起了其他问题.在阅读了Gimbal Lock的内容后,我意识到,正是修改轴的方式导致了锁定.我有一个想法可以到达相同的位置,但是可以通过不同的方式来操纵轴.它起作用了,这是结果：

http://codepen.io/Chevex/pen/pxtwj

代替：

TweenMax.set('.right', { rotationY: 90, x: '100px' });
TweenMax.set('.left', { rotationY: -90, x: '100px' });

我坐下,沿着脑子里的轴,想出了一条新的路径将元素移到同一位置.

TweenMax.set('.right', { rotationZ: 90, rotationY: 90, rotationX: 90, x: '100px' });
TweenMax.set('.left', { rotationZ: -90, rotationY: -90, rotationX: 90, x: '100px' });

之后,由于Y轴指向我原本希望X轴指向的方向,因此我可以对Y轴进行动画处理并获得预期的结果.

TweenMax.to('.right, .left', gearSpeed, { rotationY: 360, repeat: -1, ease: Linear.easeNone });

标签：greensock,tweenlite,css3,animation,javascript
来源： https://codeday.me/bug/20191121/2051112.html