內容filter翻轉效果,水平翻轉,垂直翻轉,順時針90,180,270翻轉。0-90度任意翻轉

<style type="text/css">
 .div {border:5px solid #333;width:360px;height:420px; background: url(http://imglong.593wan.com/ico/common/avatornew/main/warrior_2.gif) no-repeat center; }
 .fv {filter: progid:DXImageTransform.Microsoft.BasicImage(Rotation=1);}  /* rotation:1 (順時針旋轉90度); 2 (順時針旋轉180度); 3 (順時針旋轉270度)
 /*filter: FlipV(垂直翻轉對象內容); FlipH(水平翻轉對象內容)*/
  </style>
filter翻轉的濾鏡效果只有IE,或者以IE爲內核的瀏覽器(如傲遊)中實現<br />
 <div class="div fv"></div>
 <img src="http://imglong.593wan.com/ico/common/avatornew/main/warrior_2.gif" class="fv" style="filter:flipv;">


<!-- 0-90度內的旋轉  -->
<style>
#test{
    position:absolute;
    top=100px;
    height=500px;
    filter:
        progid:DXImageTransform.Microsoft.Matrix(enabled=true,SizingMethod=clip to original,FilterType=nearest neighbor)
        FlipH(enabled=false)
        FlipV(enabled=false);
    }
</style>
<div id=test>
    <img src="http://gg.blueidea.com/2005/olay/olay.gif">
</div>
<input id=angle value=30><input type=button onclick="doRotate(angle.value,test)" value="旋轉">
<script>
function doRotate(sita,obj){
    var t=Math.PI*sita/180;
    var c=Math.cos(t);
    var s=Math.sin(t);
    with(obj.filters.item(0)){
        Dx=0;
        M11=c;
        M12=-1*s;
        M21=s;
        M22=c;
        }
    }
doRotate(30,test)
</script>

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章