chk1 · February 24, 2017 20:33
diff --git a/rotation.html b/rotation.html
 <!DOCTYPE HTML>
 <html>
 <head>
 <title>...</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <style type="text/css">
 html, body, #watercup {
  margin:0;
  padding:0;
  width:100%;
  height:100%;
 }
 html, body {
  overflow:hidden;
 }
 #watercup {
  border:none;
 }
 </style>
 </head>
 <body><iframe src="http://blog.fefe.de" id="watercup"></iframe><script>
 var watercup = document.querySelector('#watercup');

 function handleOrientation(event) {
  var x = event.beta;  // In degree in the range [-180,180], x, 'front to back'
  var y = event.gamma; // In degree in the range [-90,90], y, 'left to right'
  var z = event.alpha; // 0-360, z, compass orientation

  // coord 1: 0,0
  // coord 2: x,y
  // calculate the angle
  var rad = Math.atan2(y, x);
  var deg = rad * (180 / Math.PI);

  // take into account if phone is held sideways / in landscape mode
  var screenOrientation = screen.orientation || screen.mozOrientation || screen.msOrientation;
  // 90, -90, or 0
  var angle = screenOrientation.angle || window.orientation || 0; 
  
  deg = deg + angle; 

  watercup.innerHTML = Math.round(deg);
  watercup.style.transform = 'rotate('+ -deg +'deg)';
 }

 window.addEventListener('deviceorientation', handleOrientation);
 </script>
 </body>
 </html>
	<!DOCTYPE HTML>
	<html>
	<head>
	<title>...</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
	html, body, #watercup {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
	}
	html, body {
	overflow:hidden;
	}
	#watercup {
	border:none;
	}
	</style>
	</head>
	<body><iframe src="http://blog.fefe.de" id="watercup"></iframe><script>
	var watercup = document.querySelector('#watercup');

	function handleOrientation(event) {
	var x = event.beta; // In degree in the range [-180,180], x, 'front to back'
	var y = event.gamma; // In degree in the range [-90,90], y, 'left to right'
	var z = event.alpha; // 0-360, z, compass orientation

	// coord 1: 0,0
	// coord 2: x,y
	// calculate the angle
	var rad = Math.atan2(y, x);
	var deg = rad * (180 / Math.PI);

	// take into account if phone is held sideways / in landscape mode
	var screenOrientation = screen.orientation \|\| screen.mozOrientation \|\| screen.msOrientation;
	// 90, -90, or 0
	var angle = screenOrientation.angle \|\| window.orientation \|\| 0;

	deg = deg + angle;

	watercup.innerHTML = Math.round(deg);
	watercup.style.transform = 'rotate('+ -deg +'deg)';
	}

	window.addEventListener('deviceorientation', handleOrientation);
	</script>
	</body>
	</html>