以中心为圆点旋转:transform-origin:center 0px
旋转角度:transform:rotate(360deg)
顺时针旋转角度
旋转角度可以写在js代码里,点击旋转或者加载页面旋转.都行
下面是用css旋转图片，用js换className。
换图片地址后试试。
<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>
转自 zhaoapk 的回答。
