Html图片自转,用css实现图片的旋转

.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')"

}

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

}