时钟的制作，transform-origin: left center;怎么知道改变了后的焦点是在哪里？是相对于父元素？

Question

.line-demo{

position: absolute;

left: 50%;

top: 50%;

transform:rotate(-60deg) translate(75px,-50%);

transform-origin: left center;

width: 20px;

height: 10px;

background-color: red;

z-index: 1;

}

Answer 1

比如rotate()原本是的变形原点是中心位置，改成left center就变成是左边上下居中的那个位置，以那个点为坐标原点进行变换，且此后的变化都基于此原点也就是会影响 translate的变化。因为变形是变的是整个坐标系，而不是表明上看的变化元素

Answer 2

transform-origin:是更改元素变形的原点。left center就是代表坐标系的xy轴