Using device orientation with 3D transforms - Developer guides 编辑

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[1] = Math.atan2( -rm21, n );

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

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

    return {
        alpha: -ea[0] * TO_DEG - 180,
        beta:  -ea[1] * TO_DEG,
        gamma:  ea[2] * TO_DEG
    };
}

See also

• Using CSS transforms
• Detecting device orientation