css3里的坐标轴方向到底是什么样的？x轴和y轴正方向是哪里？用transform的skew变形的时候晕死了望大神解答

Posted 2023-03-09

百度上有说坐标原点是在左上角的，有说是元素中心的，坐标轴方向又说竖直向上为x正方向，水平向右为y轴正方向；也有说水平向右为x轴正方向，竖直向下为y轴正方向的。晕死了

transform默认是左上角为起点的,除非是手动设置了

transform-origin 属性允许您改变被转换元素的位置。
2D 转换元素能够改变元素 x 和 y 轴。3D 转换元素还能改变其 Z 轴。transform-origin: x-axis y-axis z-axis;
值描述
x-axis    定义视图被置于 X 轴的何处。可能的值：left | center | right | length | %    
y-axis    定义视图被置于 Y 轴的何处。可能的值：top | center| bottom | length |%    
z-axis    定义视图被置于 Z 轴的何处。可能的值：length追问

那transform的skew方法变形的原点也是左上角吗？

追答

当然

参考技术A 通俗的来说，水平方向你理解为箭头是横的，垂直方向你理解为箭头是竖的，搭配楼上的图你就懂了