スマホを傾けても中身は水平なままのページを作ってみたい

完全にネタとして。

以前も紹介したが、DeviceOrientationEvent を利用すると、モバイル端末の傾きを JavaScript で検知できる。コレを利用して 3D のオブジェクトが動くインタラクティブな仕掛けを作ったりできるが、その流れで思いついたネタ。

端末の傾きが分かるということは、端末の傾きを相殺するようにページ全体を逆に回転させてやれば、スマホの傾きに関わらず地面に対して水平なページが作れないか？と思ったのだ。

実際にやってみたら結構面倒臭そうだったので、途中のコードのみ。iPhone7Plus で検証したが、他の端末では思ったように動かないかも？

if(window.DeviceOrientationEvent) {
  window.addEventListener('deviceorientation', (event) => {
    const x = Math.round(event.beta);
    const y = Math.round(event.gamma);
    const z = Math.round(event.alpha);
    
    document.documentElement.style.transform = `rotate(${-1 * y}deg)`;
  });
}

スマホをほぼ垂直に立てた状態で左右に回転させると分かりやすいかと。大元の要素を documentElement で取得し、Y 軸 (Gamma) の値を負数に変えた値を transform: rotate(deg) に設定しているだけ。

スマホを寝かせた時はどうも X (Beta) の値を一緒に見てあげないと綺麗にいかなさそうだった。

あと、傾きに応じて skew() を入れてやったら、ユーザから見て奥になる部分を大きめに表示したりして、スマホをどう傾けても中身が平面かのように見せたりできないかな？とか思ったが、なんかすげーつらそうなので止めた。

もっと変わったことができたらいいんだけどな〜、数学的な頭が足りない。w