文章專區

網頁設計相關文章

用CSS作水平垂直翻轉

 在網頁設計中,若要將一張圖片作水平或是垂直翻轉,除了新製作一張翻轉過的圖片以外,還可以直接用CSS做到,這就要應用到CSS的transform屬性了。此屬性除了上次介紹的旋轉效果以外,也可以做翻轉,也就是鏡射效果。

寫法為以下:

水平翻轉:

scale本為縮放效果,可以控制圖片的縮放倍率,如果設定值為scaleX(-1),便可以呈現出鏡射效果。

 

垂直翻轉:

水平為scale(X),反之垂直翻轉則是要設scale(Y)