--- /dev/null
+* {
+ margin: 0;
+ padding: 0;
+}
+
+h1 {
+ font-size: 1.4em;
+ margin: 10px 0 5px 10px;
+ color: #6587ac;
+}
+h1 + .desc {
+ font-size: 0.8em;
+ border-bottom: 2px solid #6587ac;
+ margin: 0 10px 20px;
+ color: #6587ac;
+}
+
+.holder {
+ text-align: center;
+ padding: 15px 0;
+ margin: 0 auto;
+ border: 2px dotted #d9d9d9;
+ perspective: 1000;
+ -webkit-perspective: 1000;
+}
+.holder img {
+ max-width: 100%;
+}
--- /dev/null
+<!DOCTYPE html>
+<html>
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+ <meta name="description" content="Tizen basic template generated by Tizen Web IDE"/>
+
+ <title>Device Orientation - Device Image Rotation</title>
+
+ <link rel="stylesheet" type="text/css" href="css/style.css"/>
+ <script src="js/main.js"></script>
+</head>
+
+<body>
+ <h1>DEVICE IMAGE ROTATION</h1>
+
+ <div class="holder">
+ <img id="logo" src="images/tizen_logo_light.png" alt="Tizen logo">
+ </div>
+
+ <p id="alpha"></p>
+ <p id="beta"></p>
+ <p id="gamma"></p>
+</body>
+</html>
--- /dev/null
+function deviceOrientationEvents() {
+ var alphaElem = document.getElementById("alpha");
+ var betaElem =document.getElementById("beta");
+ var gammaElem = document.getElementById("gamma");
+ var logoImg = document.getElementById("logo");
+ var rotateY = 0, rotateX = 0;
+
+ window.addEventListener("deviceorientation", handleDeviceOrientation, false);
+
+ function handleDeviceOrientation(e) {
+ rotateX = ('rotateX(' + e.beta * 1.2 + 'deg)')
+ rotateY = ('rotateY(' + e.gamma * 1.2 + 'deg)')
+
+ //Style insert
+ logoImg.style.webkitTransform = rotateY + ' ' + rotateX
+
+ alphaElem.innerHTML ="alpha value "+ Math.round(e.alpha);
+ betaElem.innerHTML = "beta value "+ Math.round(e.beta);
+ gammaElem.innerHTML = "gamma value "+ Math.round(e.gamma);
+ }
+}
+
+window.onload = function() {deviceOrientationEvents();};