<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function imageRotation(name) {
document.getElementById('image').className = name;
}
</script>
<style>
.rotate-90 {
-webkit-transform: rotate(90deg);
transform: rotate(90deg)
}
.rotate-180 {
-webkit-transform: rotate(180deg);
transform: rotate(180deg)
}
.flip-horizontal {
-webkit-transform: scaleX(-1);
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
transform: scaleX(-1)
}
.flip-vertical {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1)
}
</style>
</head>
<body>
<img src="images/1.png" width="500" contextmenu="demo-image" id="image" />
<menu id="demo-image" type="context">
<menu label="旋转图像">
<menuitem icon="images/icon1.png" onclick="imageRotation('rotate-90')" >旋转90度</menuitem>
<menuitem icon="images/icon2.png" onclick="imageRotation('rotate-180')">旋转180度</menuitem>
<menuitem icon="images/icon4.png" onclick="imageRotation('flip-horizontal')">水平翻转</menuitem>
<menuitem icon="images/icon3.png" onclick="imageRotation('flip-vertical')">垂直翻转</menuitem>
</menu>
</menu>
</body>
</html>
采用contextmenu 定义元素上下文，用js 控制css
右键图片菜单选择指令
您可以打开链接查看： http://runjs.cn/detail/keced55f