任何方式可视化的CSS转换原点？

Question

我想让一个物体沿弧线移动，为此我需要设置transform-origin点远离物体本身，然后rotate它。因此，不是盲目地使用不同的长度移动transform-origin点，然后通过试验和错误最终达到所需的结果，是否有办法使点可见以使该过程更容易？

Answer 1

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

值可以是长度，百分比或关键字的顶部，左侧，右侧，底部和中心。

第一个值是水平位置，第二个值是垂直位置，第三个值代表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

Answer 2

你可以添加一个帮手与CSS。只是下面的代码片段添加到您在变换原点属性设置为元素，其中用于变换原点的x值是相同的助手和y的值左边的值是一样的顶值。

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