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

Question

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

Answer 1

您可以使用 CSS 添加助手。只需将以下 sn-p 添加到您将 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%);
}

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

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

主要思想是通过将这两个跨度放置在其中来获得对任何元素的投影动画进行可视化的可能性。测试时要对目标元素内容进行注释。

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>

更多refrence