# Using device orientation with 3D transforms

This article provides tips on how to use device orientation information in tandem with CSS 3D transforms.

## Using orientation to rotate an element

The easiest way to convert orientation data to a 3D transform is basically to use the alpha, gamma, and beta values as `rotateZ`, `rotateX` and `rotateY` values.

It is important to keep in mind, however, that the Device Orientation coordinate system is different from the CSS coordinate system. Namely, the former is right-handed and its Y axis is positive upwards, while the latter is a left-handed coordinate system whose Y axis is positive to the bottom. Furthermore, the Device Orientation angle rotations should always be done in a Z - X' - Y'' order that does not match the order of some CSS Transforms. These are some of the practical consequences of these differences:

• The order of angle rotations matters, so make sure the alpha, beta and gamma rotations are applied in this order.
• The rotate3d() CSS transformation, and the DOMMatrixReadOnly.rotate() and DOMMatrix.rotateSelf() functions apply angle rotations in a Z - Y' - X'' order, so it is not possible to apply the alpha, beta and gamma rotations in the right order with a single call to any of them. Instead, you should rotate each axis individually in the correct order.
• Due to the differences in coordinate systems outlined above, when looking towards the origin rotations are applied clockwise around in CSS and counter-clockwise in the Device Orientation spec. This means alpha and beta need to be inverted (the rotations around Z and X), but gamma (the rotation around Y) does not because they point to different directions in the two coordinate systems.

Here's a simple code snippet to sum it up:

``````const elem = document.getElementById("view3d");

window.addEventListener("deviceorientation", function(e) {
elem.style.transform =
`rotateZ(\${-e.alpha}deg) rotateX(\${-e.beta}deg) rotateY(\${e.gamma}deg)`;
});
``````

## rotate3d to orientation

Should you ever need to convert a rotate3d axis-angle to orientation Euler angles, you can use the following algorithm:

``````// convert a rotate3d axis-angle to deviceorientation angles
function orient( aa ) {
var x = aa.x, y = aa.y, z = aa.z, a = aa.a,
c = Math.cos( aa.a ),
s = Math.sin( aa.a ),
t = 1 - c,
// axis-angle to rotation matrix
rm00 =    c + x*x * t,
rm10 =  z*s + y*x * t,
rm20 = -y*s + z*x * t,
rm01 = -z*s + x*y * t,
rm11 =    c + y*y * t,
rm21 =  x*s + z*y * t,
rm02 =  y*s + x*z * t,
rm12 = -x*s + y*z * t,
rm22 =    c + z*z * t,

TO_DEG = 180 / Math.PI,
ea = [],
n = Math.sqrt( rm22 * rm22 + rm20 * rm20 );

// rotation matrix to Euler angles
ea = Math.atan2( -rm21, n );

if ( n > 0.001 ) {
ea = Math.atan2( rm01, rm11 );
ea = Math.atan2( rm20, rm22 );

} else {
ea = 0;
ea = ( rm21 > 0 ? 1 : -1 ) * Math.atan2( -rm10, rm00 );
}

return {
alpha: -ea * TO_DEG - 180,
beta:  -ea * TO_DEG,
gamma:  ea * TO_DEG
};
}
``````