CSS圖片倒影效果兼容firefox、IE嗎？CSS圖片倒影效果兼容說明
無需flash，完全用css就可以做出超炫的圖片倒影效果 。網上流傳很多種版本 ， 經過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大家分享一下 。最終完成的效果
新瀏覽器的實現
指的是firefox、chrome和IE9 。新瀏覽器都支持CSS3新添的transform屬性，所以實現倒影效果非常簡單 。從下面的代碼看到，各家瀏覽器對transform的實現有點不同
-webkit-transform: scaleY(-1); /* webkit內核瀏覽器的實現 ， 例如safari */
-moz-transform: scaleY(-1); /* firefox 的實現 */
【CSS圖片倒影效果兼容firefox、IE嗎？CSS圖片倒影效果兼容說明】-ms-transform: scaleY(-1); /* IE 的實現 */
-o-transform: scaleY(-1); /* Opera的實現 */
HTML
CSS
在倒轉的圖片上面還加了一個DIV.overlay層，做出漸變的效果，使倒影看起來更真實 。
兼容舊瀏覽器的實現
考慮到還有相當多的人在使用舊版瀏覽器，程序員絞盡腦汁為這部分人做兼容 。這里指的是IE7/IE8 。IE6怎么辦?提示用戶升級瀏覽器吧 。
舊IE不支持transform屬性，可以使用濾鏡 filter:flipv 來生成圖片倒轉 ， 但會跟IE9的transform沖突 。所以要用到各種 hack 來解決 。修改后的CSS如下，添加了IE9 hack ， 覆蓋掉上面的filter:flipv的屬性 。
運行一下，在各版本的瀏覽器能看到最終的效果了 。
