transform属性关于先平移后旋转和先旋转后平移的问题

文章目录

1. 1. 1.先平移后旋转
2. 2. 2.先旋转后平移

1.先平移后旋转

transform: translate(100px) rotate(45deg);

原图:

最后效果:

实现过程: 先在X轴的正方向上平移100px，再顺时针旋转45度。

2.先旋转后平移

transform: rotate(45deg) translate(100px);

原图:

最后效果:

实现过程: 先顺时针旋转45度，此时坐标系已跟着元素一起旋转了45度，再向已经改变的X轴正方向上平移100px。