今天去见个客户，讨论到了一些html5/css3的问题。

回来复习了下html5/css3,发现除了支持的五花八门不实用的video/audio标签外，最重要的基本就是2D旋转transform:rotate了。

回来找了个可以在ie6+使用的旋转插件

https://github.com/heygrady/transform/downloads

发现非常好用。

但是在IE下出问题了。哪怕在ie7和ie8，我的半透明png图都出现了可怕的黑边。

立马google了下，发现问题在于，哪怕ie7,ie8,也并不是真正的支持半透明png,而是自动对半透明png调用一个滤镜。

但是ie又只能对一个元素使用一个滤镜，所以旋转/透明度滤镜又会冲掉png alpha通道滤镜。

解决的办法是为图像建立足够多的wrap层。

这种情况下，透明度的插件可以直接生效了，但是旋转插件还是会有黑边出现。

于是在某条回复下找到了如下代码，对img元素使用png alphp滤镜，才能比较完美的解决这个问题。

  $('img[src$=".png"]').each(function() { // must have quotes around .png
            this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src="+this.src+",sizingMethod='scale')";
        });

再配合iefix的htc文件，终于能够在ie6及以上的浏览器都预先体验到ccs3中的这个重要属性了。

如下图：