关于元素变形原点(translate-origin)的一点小坑

由于3D变换相对于2D变换只是多了一个Z轴, 所以, 所有的关于X, Y轴的变换也都是一样的.

 

　　关于translate-origin, 之前一直以为坐标系的基础都是以元素中心点为坐标原点的, 看到translate-origin的demo之后发现, 这个有点例外

　　这个属性的基准也是这个元素 所以拥有left(X轴), top(Y轴), center(X轴, Y轴), Z轴上直接使用像素

　　坑:

　　　　这个属性的坑在于:

　　　　　　坐标原点是以该元素的左上角为坐标点, (0px, 0px, 0px)代表的是这个元素的左上角, 在此基准上进行一定的偏移

 

重点关注:

　　虽然元素变形点是从左上角(0px, 0px)开始计数的, 但是我们始终要记住, 默认值, 依然是元素的中心点(center, center, 0).