translate与rotate书写顺序问题

transform这个属性有几个可选值(平移、旋转、变形、倾斜)
这里记录下translate(平移)和rotate(旋转)书写顺序的影响。

到底是先平移还是先旋转,这会直接影响页面最终的显示结果。

这里通过演示来说明下问题

1、translate在前,rotate在后的效果演示
http://sandbox.runjs.cn/show/cslnosgm

translate与rotate书写顺序问题_第1张图片
image.png

2、rotate在前,translate在后的效果演示
http://sandbox.runjs.cn/show/bzbemiwx

从演示可以看出,元素先进行了旋转操作,然后将旋转后的结果进行平移

translate与rotate书写顺序问题_第2张图片
image.png

你可能感兴趣的:(translate与rotate书写顺序问题)