用css实现图片的旋转
<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="/WebTest/1.jpg" align="top">
<script>
var img = document.getElementsByName('bankPic')[0],
i = 1,
css = ['css-turn-0', 'css-turn-90', 'css-turn-180', 'css-turn-270'];
function xuanzhuan() {
img.className = css[i++ % 4];
}
</script>
</body>