菜鸟笔记
提升您的技术认知

css transform顺序问题(translate() rotate())-ag真人游戏

阅读 : 156
 transform:  translate(100px,100px) rotate(45deg);
 transform:  rotate(45deg) translate(100px,100px);

translate(x,y),可以使元素在x轴和y轴上平移。(在translate中,x轴右为正,但y轴下为正)

rotate(deg),可以使元素旋转一定角度

在几何上分析,先平移后旋转,还是先旋转后平移是一样的。但在css中却并不是如此。我们先尝试运行一下:


    
        
            demo
        
        
        
    
   
    
        

在上面的代码中,我们先平移,后旋转。我们用红块表示原来的位置,发现蓝色块按照我们的想法,先向右下偏移后,进行了旋转。符合我们的预期。

我们再尝试一下先旋转后平移。

这时元素旋转是正常的,但位置却跑到了原先位置的正下方。

其实原因很简单,当元素旋转后,其自身的坐标轴也会旋转,这时元素在进行偏移时就不是正右正下,而是沿着旋转后的坐标轴。