跨浏览器翻转

使用 CSS filter 实现 CSS3 的 transform 一样效果

顺时针转一下 顺时针转一下 逆时针转一下 这个没有转

HTML:
<span class="as-rotate as-rotate-90">顺时针转一下</span>
<span class="as-rotate as-rotate-90cw">顺时针转一下</span>
<span class="as-rotate as-rotate-90ccw">逆时针转一下</span>

CSS:
/* 顺时针 */
.as-rotate-90cw, .as-rotate-90{
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    transform: rotate(90deg);
}

/* 逆时针 */
.as-rotate-90ccw{
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotae(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    transform: rotate(-90deg);
}

问题及注意事项:

注意: rotate 所占空间与未 rotate 前一样