CSS圖片倒影效果兼容firefox、IE嗎？CSS圖片倒影效果兼容說明

無需flash，完全用css就可以做出超炫的圖片倒影效果。網(wǎng)上流傳很多種版本，經(jīng)過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大家分享一下。最終完成的效果

新瀏覽器的實現(xiàn)
指的是firefox、chrome和IE9 。新瀏覽器都支持CSS3新添的transform屬性，所以實現(xiàn)倒影效果非常簡單。從下面的代碼看到，各家瀏覽器對transform的實現(xiàn)有點不同
-webkit-transform: scaleY(-1); /* webkit內(nèi)核瀏覽器的實現(xiàn) ，例如safari */
-moz-transform: scaleY(-1); /* firefox 的實現(xiàn) */
【CSS圖片倒影效果兼容firefox、IE嗎？CSS圖片倒影效果兼容說明】-ms-transform: scaleY(-1); /* IE 的實現(xiàn) */
-o-transform: scaleY(-1); /* Opera的實現(xiàn) */
HTML

CSS

在倒轉(zhuǎn)的圖片上面還加了一個DIV.overlay層，做出漸變的效果，使倒影看起來更真實。
兼容舊瀏覽器的實現(xiàn)
考慮到還有相當(dāng)多的人在使用舊版瀏覽器，程序員絞盡腦汁為這部分人做兼容。這里指的是IE7/IE8 。IE6怎么辦?提示用戶升級瀏覽器吧。
舊IE不支持transform屬性，可以使用濾鏡 filter:flipv 來生成圖片倒轉(zhuǎn) ，但會跟IE9的transform沖突。所以要用到各種 hack 來解決。修改后的CSS如下，添加了IE9 hack ，覆蓋掉上面的filter:flipv的屬性。