CSS 旋转图片

最新推荐文章于 2023-07-05 16:21:23 发布

weixin_34238633

最新推荐文章于 2023-07-05 16:21:23 发布

阅读量94

点赞数

原文链接：http://www.cnblogs.com/wxhhts/p/8585218.html

版权

<!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" οnclick="imageRotation('rotate-90')" >旋转90度</menuitem>  <menuitem icon="images/icon2.png" οnclick="imageRotation('rotate-180')">旋转180度</menuitem>  <menuitem icon="images/icon4.png" οnclick="imageRotation('flip-horizontal')">水平翻转</menuitem>  <menuitem icon="images/icon3.png" οnclick="imageRotation('flip-vertical')">垂直翻转</menuitem>  </menu> </menu> </body> </html>

采用contextmenu 定义元素上下文，用js 控制css


右键图片菜单选择指令

您可以打开链接查看： http://runjs.cn/detail/keced55f

转载于:https://www.cnblogs.com/wxhhts/p/8585218.html

weixin_34238633

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS 旋转图片

<!doctype html><html><head><meta charset="utf-8"><title></title><script>function imageRotation(name) { document.getElementById('image').class...
复制链接

扫一扫