css - 有什么方法可以在 CSS 中可视化变换原点？

Question

我试图让一个物体沿着弧线移动，为此我需要将 transform-origin 点设置为远离物体本身，然后 rotate 它.那么，与其盲目地移动 transform-origin 点，使用不同的长度，然后通过反复试验最终达到预期的结果，有没有办法让点可见，从而使过程更容易？

Answer 1

您可以使用 CSS 添加帮助程序。只需将以下代码片段添加到您将 transform-origin 属性设置为的元素中，其中 transform-origin 的 x 值与 helper 的 left 值相同，y 值与 top 值相同。

.foo {
  position: relative;
  transform-origin: 0 100%;
}

.foo::after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 5px;
  height: 5px;
  content: '';
  background-color: #f0f;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}