quaternion
Version:
A rotation library using quaternions
118 lines (97 loc) • 2.83 kB
HTML
<html>
<head>
<title>Quaternion.js - CSS Example</title>
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'>
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
#main {
background: rgb(0, 75, 130);
background: -webkit-linear-gradient(35deg, rgb(195, 60, 110), rgb(0, 75, 130));
background: -o-linear-gradient(90deg, rgb(195, 60, 110), rgb(0, 75, 130));
background: -moz-linear-gradient(90deg, rgb(195, 60, 110), rgb(0, 75, 130));
background: linear-gradient(135deg, rgb(195, 60, 110), rgb(0, 75, 130));
height: 100%;
width: 100%;
perspective: 500px;
}
#frame {
border: 1px solid rgb(125, 185, 210);
width: 50%;
height: 20%;
position: relative;
top: 40%;
left: 25%;
text-align: center;
color: white;
transform-origin: 50% 50%;
backface-visibility: visible;
-webkit-user-select: none;
-webkit-user-drag: none;
transform-style: preserve-3d;
}
#frame h1 {
font-family: 'Pacifico', cursive;
font-size: 40px;
margin: 0;
position: relative;
top: 20%;
}
#note {
font-family: Arial;
font-size: 12px;
color: white;
position: absolute;
bottom: 0px;
}
</style>
</head>
<body>
<div id="main">
<div id="frame" onclick="initialize()">
<h1>Click Here</h1>
</div>
</div>
<script src="../dist/quaternion.min.js"></script>
<script>
var TAU = 2 * Math.PI;
var DEG = TAU / 360;
function initialize() {
var $frame = document.getElementById('frame');
var frameStyle = $frame.style;
var angles = null;
$frame.innerHTML = '<h1>Quaternion.js</h1>';
if (window.DeviceOrientationEvent && typeof DeviceOrientationEvent.requestPermission === "function") {
DeviceOrientationEvent.requestPermission().then(response => {
if (response === "granted") {
window.addEventListener('deviceorientation', function (event) {
angles = event;
}, false);
} else {
alert("Permssion revoked!");
}
});
} else {
window.addEventListener('deviceorientation', function (event) {
angles = event;
}, false);
}
function loop() {
if (angles !== null) {
frameStyle.transform = Quaternion.fromAxisAngle([0, 0, 1], screen.orientation.angle * DEG)
.mul(Quaternion.fromEulerLogical(angles.alpha * DEG, angles.beta * DEG, -angles.gamma * DEG, 'ZXY'))
.toCSSTransform();
}
window.requestAnimationFrame(loop);
}
loop();
}
</script>
</body>
</html>