文章專區
在網頁設計中,若要將一張圖片作水平或是垂直翻轉,除了新製作一張翻轉過的圖片以外,還可以直接用CSS做到,這就要應用到CSS的transform屬性了。此屬性除了上次介紹的旋轉效果以外,也可以做翻轉,也就是鏡射效果。
寫法為以下:
水平翻轉:
scale本為縮放效果,可以控制圖片的縮放倍率,如果設定值為scaleX(-1),便可以呈現出鏡射效果。
See the Pen pqEWbO by Ya (@bok770) on CodePen.
垂直翻轉:
水平為scale(X),反之垂直翻轉則是要設scale(Y)
See the Pen ZVpXyP by Ya (@bok770) on CodePen.
更多文章