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

Question

我试图让一个对象沿着弧线移动，为此我需要将

transform-origin

点设置为远离对象本身，然后

rotate

它。那么，与其盲目地使用不同的长度移动

transform-origin

点，然后通过反复试验最终达到预期的结果，有没有一种方法可以使该点可见，从而使过程变得更容易呢？

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

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

代码笔

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

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>

供进一步参考