内容filter翻转效果,水平翻转,垂直翻转,顺时针90,180,270翻转。0-90度任意翻转

来源:互联网 发布:软件如何加密 编辑:程序博客网 时间:2024/05/16 17:43

<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>