CSS旋轉后再旋轉,是一種常用的Web前端技術,可以讓頁面元素更加生動、有趣。
代碼示例: .rotate1 { transform: rotate(45deg); } .rotate2 { transform: rotate(90deg); } .rotate3 { transform: rotate(45deg) rotate(90deg); }
上面的代碼示例中,我們定義了三個CSS類:rotate1、rotate2和rotate3。其中rotate1讓元素旋轉了45度,而rotate2讓元素旋轉了90度。如果我們將這兩個類同時添加給同一個元素,它會以rotate2為基準進行旋轉,即旋轉90度。但是,如果我們將rotate3添加給元素,效果會如何呢?
答案是:旋轉45度之后,再旋轉90度,元素會以左上角為中心,逆時針旋轉45度,形成一個斜向上的效果。這是因為,CSS旋轉是基于元素中心點進行的,而后來的旋轉是基于已經旋轉過的元素中心點進行的。
這種技巧可以應用于很多場景,比如說讓一個圖片從一側滑入頁面、旋轉一定角度后再向另一側滑出。當然,如果旋轉的角度不同,效果也會各不相同,可以根據具體需要進行調整。
上一篇ajax怎么指定請求類型
下一篇css無法修改圖片