1. 程式人生 > >CSS3 實現元素翻轉(不是旋轉)

CSS3 實現元素翻轉(不是旋轉)

有時候我們要實現元素的垂直或者水平翻轉,尤其是圖片的翻轉,兩張對稱的圖片,可以用兩張圖片來解決這個問題,那麼其他的元素呢?而且存兩張圖片並不是上上策,如何用程式碼實現呢? 
CSS3提供了transform屬性,實現方法如下:

水平翻轉:

transform: scale(-1,1);

垂直翻轉:

transform: scale(1,-1);

那麼問題來了,transform:scale(x,,y)不是縮放嗎?為什麼可以實現翻轉呢?

è¿éåå¾çæè¿°

scale是縮放,也就是改變四條邊距離中心點的距離,scaleX的值越小,左右A、B兩邊距離中心點的距離越小,水平方向縮小,當scaleX值為0時,水平方向為0,當scaleX值由0向負無窮遞減時,B將在左邊距離中心點的距離增大,A將在右邊距離中心點的距離增大,這樣就是實現了水平翻轉。 
垂直翻轉同理。 

 

https://blog.csdn.net/wjnf012/article/details/70175171