CSS中有没有一种方法可以可视化转换原点？

Question

我想让一个物体沿着弧线移动，需要将transform-origin点设置为远离物体本身，然后进行rotate旋转。所以，有没有一种方法可以使该点可见，从而不是盲目地使用不同的长度移动transform-origin点，最终通过试错来实现期望的结果？

- Arif

Answer 1

你可以使用 CSS 添加一个助手。只需将以下代码片段添加到你设置 transform-origin 属性的元素中，其中 transform-origin 的 x 值与助手的 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%);
}

- user7611952

---

提醒一下，::after 不能用于 img 元素。 - mike23

这在Z方向上的transform-origin调整中不起作用。 - Lynel Hudson

Answer 2

以下是我用来可视化transform-origin的解决方案。试着在一个DIV元素上改变transform-origin的值，你会看到一个半透明点的位置被调整了。这种方法的缺点是你必须将父元素设置为position: relative。

div {
  position: relative;
  margin: 100px;
  width: 40px;
  height: 30px;
  background: #ccc;
  transform-origin: bottom left;
  animation: rotate 1s linear infinite;
}

span {
  position: absolute;
  width: 100%;
  height: 100%;
  transform: scale(0.001);
  transform-origin: inherit;
}

span::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  background: rgba(255,128,128,0.75);
  transform: scale(1000);
}

@keyframes rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

<div>
  <span></span>
</div>

transform-origin 属性仅在缩放（scale）和旋转（rotation）变换中才是必需的。对于缩放（scale），它的含义是物体从哪个点开始变大（用于放大）或缩小到哪个点（用于缩小）。因此，我首先将一个 SPAN 缩小到几乎为零的大小，然后从这个点开始增加一个半透明元素 (SPAN::AFTER)。

https://codepen.io/vbarbarosh/pen/eaQLeJ

- vbarbarosh

Answer 3

我对给出的答案不太满意，所以我尝试了这个：

Html:

<div>
  <span class="x-axis"></span>
  <span class="y-axis"></span>
</div>

还有 CSS：

:root {
    --x-origin: 85.36%;
    --y-origin: 85.36%;
}

div {
    position: relative;
    margin: 300px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #ccc;
    transform-origin: var(--x-origin) var(--y-origin);
    animation: rotate 4000ms linear infinite;
}

.y-axis {
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: inherit;
    transform: translate(0%, var(--y-origin)) rotate3d(0, 1, 0, 89.4deg);
    background: rgba(255,128,128,0.75);
}

.x-axis {
    position: absolute;
    width: inherit;
    height: inherit;
    transform-origin: inherit;
    background: rgba(128,128,255,0.75);
    transform: translate(var(--x-origin), 0%) rotate3d(1, 0, 0, 89.4deg);
}

@keyframes rotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

Codepen

主要思路是通过在元素内部放置这两个span，使得可以可视化任何元素的投影动画。测试期间应该注释目标元素内容。

- Sorin GFS

Answer 4

默认情况下，变换的原点是“50% 50%”，即在任何给定元素的中心。将原点更改为“左上角”（如上面的演示）会导致元素使用元素的左上角作为旋转点。

值可以是长度、百分比或关键字top、left、right、bottom和center。

第一个值是水平位置，第二个值是垂直位置，第三个值表示Z轴上的位置。如果您正在使用3D变换，则第三个值将起作用，但它不能是百分比。

#div1 {
    position: relative;
    height: 200px;
    width: 200px;
    margin: 100px;
    
    border: 1px solid black;
}

#div2 {
    padding: 50px;
    position: absolute;
    border: 1px solid black;
    background-color: #454545;
    -ms-transform: rotate(45deg); /* IE 9 */
    -ms-transform-origin: 20% 40%; /* IE 9 */
    -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
    -webkit-transform-origin: 20% 40%; /* Chrome, Safari, Opera */
    transform: rotate(40deg);
    transform-origin: 0px 0px; /* 0,0 indicates top left corner*/
}

<div id="div1">
  <div id="div2">HELLO</div>
</div>

如需进一步参考资料

- Hemant

---

在我的例子中，transform-origin 被设置为 (0, 0)，这就是为什么您会在左上角得到旋转，即 0,0。难道它没有被可视化吗？ - Hemant

我想让transform-origin点成为屏幕上的_实际可见点_。在这里，您展示了如何通过手动绘制一个框来使用不同的transform-origin值来影响灰色形状的旋转方式。我已经知道了transform-origin的工作原理以及它可以采用的所有不同值; 我只是想要一个可见的提示来帮助这个过程。 - Arif