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

Posted 2023-03-06

【中文标题】有啥方法可以在 CSS 中可视化变换原点？

【英文标题】：Any way to visualize the transform origin point in CSS?有什么方法可以在 CSS 中可视化变换原点？

【发布时间】：2017-06-13 21:41:17

【问题描述】：

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

【参考方案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%);

【讨论】：

提醒一下 ::after 不适用于 img 元素。

这不适用于 Z 方向的变换原点调整。

【参考方案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

【参考方案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

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

【参考方案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

【讨论】：

在我的示例中，transform-origin 设置为 (0,0)，这就是为什么您会在左上角旋转，即 0,0。它是否可视化

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