<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> Mobile two-finger rotation </title>
<meta name= "viewport" content= "Width=device-width, User-scalable=no, initial-scale=1.0,maximum-scale=1.0" >
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<style>
#div1 {
width:200px;
height:200px;
background:red;
margin:50px Auto;
font-size:40px;
Color: #fff;
}
</style>
<script>
function a2d (n) {
return n*180/math.pi;
}
Document.addeventlistener (' domcontentloaded ', function () {
var odiv=document.queryselector (' #div1 ');
var d=0;
Odiv.addeventlistener (' Touchstart ', function (EV) {
var Oldd=d;
function getd (EV) {
var X1=ev.targettouches[0].pagex;
var Y1=ev.targettouches[0].pagey;
var X2=ev.targettouches[1].pagex;
var Y2=ev.targettouches[1].pagey;
var x=x2-x1;
var y=y1-y2;
var d=a2d (math.atan2 (y,x));
return D;
}
if (ev.targettouches.length==2) {
var downd=getd (EV);
}
Document.addeventlistener (' Touchmove ', function (EV) {
if (ev.targettouches.length==2) {
D=OLDD+DOWND-GETD (EV);
odiv.style.webkittransform= ' rotate (' +d+ ' deg) ';
}
},false);
Ev.preventdefault ();
},false);
},false);
</script>
<body>
<div id= "Div1" >DIV</div>
</body>
Mobile two-finger rotation