extjs4下如何支持ie浏览器图片旋转

发布网友发布时间：2022-06-18 18:29

共1个回答

热心网友时间：2024-05-02 02:40

<!doctype html>
<html>
<head>
<style>
.css-turn-0{
    -moz-transform:matrix(1,0,0,1,0,0);
    -o-transform:matrix(1,0,0,1,0,0);
    -webkit-transform:matrix(1,0,0,1,0,0);
    transform:matrix(1,0,0,1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"
}
.css-turn-270{
    -moz-transform:matrix(0,-1,1,0,0,0);
    -o-transform:matrix(0,-1,1,0,0,0);
    -webkit-transform:matrix(0,-1,1,0,0,0);
    transform:matrix(0,-1,1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=1, M21=-1, M22=0, SizingMethod='auto expand')"
}
.css-turn-180{
    -moz-transform:matrix(-1,0,0,-1,0,0);
    -o-transform:matrix(-1,0,0,-1,0,0);
    -webkit-transform:matrix(-1,0,0,-1,0,0);
    transform:matrix(-1,0,0,-1,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=0, M21=0, M22=-1, SizingMethod='auto expand')"
}
.css-turn-90{
    -moz-transform:matrix(0,1,-1,0,0,0);
    -o-transform:matrix(0,1,-1,0,0,0);
    -webkit-transform:matrix(0,1,-1,0,0,0);
    transform:matrix(0,1,-1,0,0,0);
    -ms-filter:"progid:DXImageTransform.Microsoft.Matrix(M11=0, M12=-1, M21=1, M22=0, SizingMethod='auto expand')"
}
</style>
</head>
<body>
<img src="图片路径">
<script>
    var img = document.getElementsByTagName('img')[0],
        i = 1,
        css = ['css-turn-0', 'css-turn-90', 'css-turn-180', 'css-turn-270'];

    img.onclick = function () {
        this.className = css[i++ % 4];
    }
</script>
</body>
</html>