文章目录
  1. 1. 1.先平移后旋转
  2. 2. 2.先旋转后平移

1.先平移后旋转

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

原图:
transform

最后效果:
transform

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

2.先旋转后平移

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

原图:
transform

最后效果:
transform

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

文章目录
  1. 1. 1.先平移后旋转
  2. 2. 2.先旋转后平移