Question

情况如下，当立方体需要沿X轴旋转（从-40deg到40deg）时，由于某种原因它会跳跃，在动画结束时我会反过来（从40deg到-40deg）并且立方体正常旋转。请告诉我，原因可能是什么！代码如下所示....

＆＃13;

.container {
  position: relative;
  top: 500px;
}

.box {
  position: absolute;
  font-size: 4em;
  width: 2em;
  height: 2em;
  margin: 1.5em auto;
  perspective: 10000px;
  transform-style: preserve-3d;
  transform: rotateX(-40deg) rotateY(44deg);
}

.box11 {
  animation: rot11 12s linear infinite;
}

.side {
  position: absolute;
  width: 2em;
  height: 2em;
  background: linear-gradient(#e66465, #9198e5);
  color: white;
}

.top {
  transform: rotateX( 90deg) translateZ(1em);
  background: linear-gradient(153deg, #e66465, #9198e5);
  animation: topUCol 24s linear infinite;
}

.right {
  transform: translateZ(1em);
  animation: rightUCol 24s linear infinite;
}

.left {
  transform: rotateY(-90deg) translateZ(1em);
  background: linear-gradient(127deg, #c45a5b, #6f76b2);
}

.bottom {
  transform: rotateX(-90deg) translateZ(1em);
  animation: bottomUCol 24s linear infinite;
}

@keyframes rot11 {
  0% {
    transform: rotateX(-40deg) rotateY(44deg);
  }
  10% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  40% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  50% {
    transform: rotateX(-40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  60% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  70% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  80% {
    transform: rotateX(40deg) rotateY(44deg) translate3d(0, -507px, 0);
  }
  90% {
    transform: rotateX(40deg) rotateY(44deg);
  }
  100% {
    transform: rotateX(-40deg) rotateY(44deg);
  }
}

＆＃13;

<div class='container'>
  <div class='box box11'>
    <div class='left side '></div>
    <div class='right side'></div>
    <div class='top side'></div>
    <div class='bottom side'></div>
  </div>
</div>

＆＃13;

请帮助我，原因可能是什么！代码如下所示....

Answer 1

MDN translateX() documentation写了关于translateX（）

的内容

rotateX（）CSS函数定义了一个旋转的转换   横坐标（横轴）周围的元素没有变形。   其结果是数据类型。

旋转轴穿过由原点定义的原点   transform-origin CSS属性。

什么是原产地＆＃39;

MDN transform-origin documentation写了关于transform-origin的信息：

转换起点是转换的关键点被申请;被应用。例如，rotate（）的转换原点功能是旋转的中心。（此属性首先应用然后，通过属性的否定值来转换元素应用元素的变换，然后通过属性进行翻译值。）

让我们总结一下。

浏览器检查与我们正在处理的元素相对应的原点。
浏览器通过此点绘制虚构的水平线（水平轴）。
当您应用rotateX()元素时，它会围绕此轴旋转。

translate3d()如何影响我的轮换。

translate3d()沿着x，y和z轴移动元素的原点。如果沿y轴移动元素（在x轴和元素之间创建距离），旋转将使元素在距离x轴创建的距离处旋转。要查看此操作，请参阅代码示例。

补充阅读

如果您真的对幕后的工作方式感兴趣，可能需要阅读矩阵。矩阵也用于其他操作（例如SVG中的各种滤镜效果）。您可以阅读MDN documentation: Matrix math for the web。

既然您问过我没有使用您的代码的原因，但是举了这个例子来说明会发生什么：

以下是my codePen of the same code的链接（可能更容易观看）。

＆＃13;

// don't pay attention to the javascript, it doesn't do anything aside from changing the text.
function setDescription (newText, timeout){	
	setTimeout(() => {
	 document.getElementById('description').innerText = newText;
  }, timeout);
}

setDescription ('Rotating around X-axis', 0);
setDescription ('Rotating around Y-axis', 7000);
setDescription ('Move along the Y-axis', 14000);
setDescription ('Rotating around X-axis', 16000);
setDescription ('Returning to starting position', 22000);
setDescription ('Reload to replay', 24000);

＆＃13;

#container{
  position: relative;
  height: 500px;
  width: 500px;
  border: 1px solid grey;
}
#description{
  position: absolute;
  left: 0px;
  right: 0px;
  top: 0px;
  text-align: center;
}
#x-axis{
  position: absolute;
  left: 50px;
  top: calc(50% - 1px);
  width: 400px;
  height: 0px;
  border: 1px solid grey;
}
#y-axis{
  position: absolute;
  left: calc(50px - 1px);
  top: 50%;
  width: 400px;
  height: 0px;
  border: 1px solid red;
  transform: rotateZ(90deg);
}

#object{
  position: absolute;
  left: calc(50% - 20px);
  top: calc(50% - 20px);
  width: 40px;
  height: 40px;
  background-color: black;
  animation: 
    rotateAroundX 3s linear 0s 2, /*0 - 6s*/
    rotateAroundY 3s linear 7s 2, /*7 - 13s*/
    moveAlongY 2s linear 14s, /*14 - 16s*/
    rotateAroundXAndTranslateY 3s linear 16s 2, /* 16 - 22s*/
    moveBackAlongY 2s linear 22s; /* 22 - 24s*/
}

@keyframes rotateAroundX{
  0%{
    transform: rotateX(0deg);
  }
  100%{
    transform: rotateX(360deg);
  }
}
@keyframes rotateAroundY{
  0%{
    transform: rotateY(0deg);
  }
  100%{
    transform: rotateY(360deg);
  }
}
@keyframes rotateAroundXAndTranslateY{
  0%{
    transform: rotateX(0deg) translate3d(0, 50px, 0);
  }
  100%{
    transform: rotateX(360deg) translate3d(0, 50px, 0);
  }
}
@keyframes moveAlongY{
  0%{
    transform: translate3d(0, 0px, 0);
  }
  50%{
    transform: translate3d(0, 50px, 0);
  }
  100%{
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes moveBackAlongY{
  0%{
    transform: translate3d(0, 50px, 0);
  }
  100%{
    transform: translate3d(0, 0px, 0);
  }
}

＆＃13;

<div id="container">
<h3 id="description"></h3>
  <div id="x-axis"></div>
  <div id="y-axis"></div>
  <div id="object"></div>
</div>

＆＃13;

关键帧的奇怪行为

1 个答案: