话不多说，直接上代码：
#set($_title = "查看司机照片")
#parse("common/_header.vm")
<style>
.img{
overflow-y: auto;
overflow-x: auto;
}
</style>
</head>
<body class="img">
<img id="target" src="$!{url}" onmousewheel="return bigimg(this)" style="cursor:pointer">
<script>
window.onload = function(){
var current = 0;
document.getElementById('target').onclick = function(){
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
};
function bigimg(obj){
var zoom = parseInt(obj.style.zoom,10)||100;
zoom += event.wheelDelta / 20;
if(zoom > 0 )
obj.style.zoom=zoom+'%';
return false;
}
</script>
</body>
</html>
代码解析：
其中 onmousewheel="return bigimg(this)" 控制鼠标滑轮的滚动事件。（其中放大缩小比例可以通过修改 zoom += event.wheelDelta / 20; 后面的分母，分母越小，滚动一次缩放比例越大）
下面这段代码控制点击翻转图片90°。
window.onload = function(){
var current = 0;
document.getElementById('target').onclick = function(){
current = (current+90)%360;
this.style.transform = 'rotate('+current+'deg)';
}
};
