CSS transform-origin原点位置

一般我们使用transform-origin的格式为：

transform-origin:50% 50%

这里解释一下50%的比例标准

 

 

 如上图，从-x到x是0到100%的过渡，同样，从-y到y是0到100%的过渡。

注意：这里的y轴是反向的，和我们数学里常见的坐标轴不一样。

知道这个后，我们就可以对A到G点用transform-origin来表示：

A:

transform-origin:0 50%

B:

transform-origin:50% 0

C:

transform-origin:100% 50%

D:

transform-origin:50% 100%

E:

transform-origin:50% 50%

F:

transform-origin:25% 25%

G:

transform-origin:75% 25%

你学废了吗？