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

2021-07-30 13:49:25 字數 531 閱讀 7645

有時候我們要實現元素的垂直或者水平翻轉,尤其是的翻轉,兩張對稱的,可以用兩張來解決這個問題,那麼其他的元素呢?而且存兩張並不是上上策,如何用**實現呢?

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將在右邊距離中心點的距離增大,這樣就是實現了水平翻轉。

垂直翻轉同理。

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

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

CSS旋轉與翻轉

從別處看到的,先記下來,方便以後檢視 css 2.0還是沒有翻轉的,3.0裡面有rotate屬性,這個可以把元素進行 任意角度旋轉,灰常強大。除了這個rotate,還有乙個scale,一般用法格式是 moz transform scale 1,1 括弧裡面 1,1 前者表示x軸,後者表示y軸,當數字...

CSS旋轉與翻轉

css 2.0還是沒有翻轉的,3.0裡面有rotate屬性,這個可以把元素進行任意角度旋轉,灰常強大。除了這個rotate,還有乙個scale,一般用法格式是 moz transform scale 1,1 括弧裡面 1,1 前者表示x軸,後者表示y軸,當數字大於1時放大,大於0並小於1時縮小,很好...