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

【问题标题】：Reset CSS transform origin after translation / rotation平移/旋转后重置 CSS 变换原点
【发布时间】：2017-05-01 04:40:43
【问题描述】：

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

除了最后一个 wide 旋转之外，以下动画的行为与预期完全相同。我希望最后一个旋转围绕实际元素的中心旋转。不是原来的位置。如何将transform 原点移回该元素的中心。想法？

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;
}

<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>

【问题讨论】：

标签： html css rotation css-animations css-transforms

【解决方案1】：

重置变换原点，正如你所说的困难

但是，您可以继续在右侧添加转换，而之前的转换保持不变，您会得到您想要的。

（附带说明，在 sn-p 中，您不需要 HTML 中的 body 元素，样式最好放在 CSS 编辑器中。）

.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;
}

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

【讨论】：

哇...这太棒了
很高兴它有帮助！
但我可能已经用这种技术把自己编码到了一个角落：stackoverflow.com/questions/43723656/…。