Question

在CSS中翻译元素后，它的转换源位于其原始位置。在这种特殊情况下，我希望在所有变换期间，变换原点相对于元素居中保持。我希望原点是跟随被转换的元素。我知道transform-origin属性，但这似乎要求我每次都用元素手动移动原点......即使我可以用JavaScript做到这一点，它似乎很重，而且不直观。

除最后一次宽旋转外，下面的动画表现完全符合预期。我希望最后一次旋转围绕实际元素的中心旋转。不是它的原始位置。如何将transform原点移回此元素的中心。想法？

＆＃13;

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfdfd;
  color: #aaa;
  font-family: Arial, 'sans-serif';
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}
.tri {
  width: 0; 
  height: 0; 
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid #555;
  transform: scaleY( 2 );
  border-radius: 50%;
}
.status, .instr {
  position: absolute;
}
.status {
  top: 0;
}
.instr {
  bottom: 0;
}

＆＃13;

<head>
  <style>
    .tri-bx {
      animation-name: start;
      animation-duration: 5s;
      animation-iteration-count: infinite;
    }
    @keyframes start {
      0% {
        transform: rotate( 0deg );
      }
      33% {
        transform: rotate( 315deg );
      }
      66% {
        transform: rotate( 315deg ) translate( 0, -5rem );
      }
      100% {
        transform: rotate( 720deg ) translate( 0, -5rem );
      }
    }
  </style>
</head>

<body>
  <div class="tri-bx">
    <div class="tri"></div>
  </div>
</body>

＆＃13;

Answer 1

重置转换原点，正如您所说 hard

但是，您可以继续在右侧添加转换，而不改变之前的转换，并且您将得到您想要的内容。

（作为旁注，在一个片段中，您不需要HTML中的body元素，并且样式最好放在CSS编辑器中。）

＆＃13;

.tri-bx {
  animation-name: start;
  animation-duration: 5s;
  animation-iteration-count: infinite;
}

@keyframes start {
  0% {
    transform: rotate( 0deg);
  }
  33% {
    transform: rotate( 315deg);
  }
  66% {
    transform: rotate( 315deg) translate( 0, -5rem) rotate(0deg);
  }
  100% {
    transform: rotate( 315deg) translate( 0, -5rem) rotate( 405deg);
  }
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fdfdfd;
  color: #aaa;
  font-family: Arial, 'sans-serif';
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
}

.tri {
  width: 0;
  height: 0;
  border-left: 1rem solid transparent;
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid #555;
  transform: scaleY( 2);
  border-radius: 50%;
}

.status,
.instr {
  position: absolute;
}

.status {
  top: 0;
}

.instr {
  bottom: 0;
}

＆＃13;

<div class="tri-bx">
  <div class="tri"></div>
</div>

＆＃13;

在平移/旋转后重置CSS变换原点

1 个答案: