chk1/rotation.html

## 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>