Question

正在尝试创建动画

规模
旋转
翻译

但是我不明白为什么旋转不能在translateX上很好地播放，我试图让动画沿着z-axis连续运动而不是像漩涡一样，我已经搜索了很多，但是我找不到之后，因此不胜感激。

function reRun() {
  document.querySelector('.item').classList.remove('spin-animation')
  setTimeout(function() {
    document.querySelector('.item').classList.add('spin-animation')
  },300)
  
}

@keyframes spin {
  0% {
    transform: scale(1) rotateY(0deg) translate(0, 0);
  }
  25% {
    transform: scale(2) rotateY(360deg) translate(-1rem, -1rem);
  }
  50% {
    transform: scale(3) rotateY(0deg) translate(-1.5rem, -1.5rem);
  }
  75% {
    transform: scale(4) rotateY(360deg) translate(-2rem, -2rem);
  }
  100% {
    transform: scale(5) rotateY(0deg) translate(-2.5rem, -2.5rem);
  }
}

.spin-animation {
  animation: spin 2s linear forwards;
}

.item {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: red;
}

.axis {
  position: absolute;
  right: 0.8rem;
  bottom: 1.2rem;
}

.y-axis {
  width: 1px;
  height: 300px;
  background: black;
  position: absolute;
  right: 0;
  bottom: 0;
}

.x-axis {
  width: 300px;
  height: 1px;
  background: black;
}

.z-axis {
  width: 1px;
  height: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  transform: skewX(45deg);
  transform-origin: right bottom;
}

.z-axis span {
  padding: 0.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button onclick="reRun()">ReRun the Example</button>

<div class="item spin-animation">
  <i class="fa fa-question" aria-hidden="true"></i>
</div>

<div class="axis">
  <div class="y-axis"><span>Y</span></div>
  <div class="x-axis"><span>X</span></div>
  <div class="z-axis"><span>Z</span></div>
</div>

Answer 1

在大多数情况下，顺序很重要。首先平移（它也会更改旋转中心或旋转轴），然后缩放然后旋转。

function reRun() {
  document.querySelector('.item').classList.remove('spin-animation')
  setTimeout(function() {
    document.querySelector('.item').classList.add('spin-animation')
  },300)
  
}

@keyframes spin {
  0% {
    transform: translate(0, 0) scale(1) rotateY(0deg);
  }
  25% {
    transform: translate(-1rem, -1rem) scale(2) rotateY(360deg);
  }
  50% {
    transform: translate(-1.5rem, -1.5rem) scale(3) rotateY(0deg);
  }
  75% {
    transform: translate(-2rem, -2rem) scale(4) rotateY(360deg);
  }
  100% {
    transform: translate(-2.5rem, -2.5rem) scale(5) rotateY(0deg);
  }
}

.spin-animation {
  animation: spin 2s linear forwards;
}

.item {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 2rem;
  color: red;
}

.axis {
  position: absolute;
  right: 0.8rem;
  bottom: 1.2rem;
}

.y-axis {
  width: 1px;
  height: 300px;
  background: black;
  position: absolute;
  right: 0;
  bottom: 0;
}

.x-axis {
  width: 300px;
  height: 1px;
  background: black;
}

.z-axis {
  width: 1px;
  height: 300px;
  position: absolute;
  right: 0;
  bottom: 0;
  background: black;
  transform: skewX(45deg);
  transform-origin: right bottom;
}

.z-axis span {
  padding: 0.5rem;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<button onclick="reRun()">ReRun the Example</button>

<div class="item spin-animation">
  <i class="fa fa-question" aria-hidden="true"></i>
</div>

<div class="axis">
  <div class="y-axis"><span>Y</span></div>
  <div class="x-axis"><span>X</span></div>
  <div class="z-axis"><span>Z</span></div>
</div>

css动画在移动时旋转

1 个答案: