今天我们来谈一下CSS的变换效果中一个很有趣的现象——先旋转再位移，和先位移再旋转的视觉效果是一样的。
transform: rotate(45deg) translate(100px,0); /* 先旋转后位移 */ transform: translate(100px,0) rotate(45deg); /* 先位移后旋转 */
以上两行代码实现的效果是一样的，都是先将元素旋转45度再水平向右移动100像素，但是“先后顺序”不同。这里的“先后顺序”指的是CSS的写法顺序，即写在前面的变换效果会先被应用。
那么为什么两种写法会有相同的效果呢？这是因为CSS的变换效果是”可叠加“的。也就是说，无论我们按照什么顺序来写变换效果，最终的效果都是将所有的变换一起作用于元素的。
通过这个例子，我们可以知道，在CSS中，变换效果是有顺序的，但是这个顺序并不影响最终的效果。希望这篇文章能够对你有所帮助。
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
