【CSSは左手系】スマホの姿勢をCSSで反映させるいくつかの方法と考え方【センサは右手系】 - Qiita

※本文中の行列の表現や実装上の扱いについて、先にコメント欄をご確認ください。 はじめに 前回の記事でDeviceOrientation Eventの値をグラフにリアルタイム表示してみました。 今回はそのDeviceOrientation EventとOrientation Sensor APIを使って、スマホの姿勢をCSSで反映させる方法を検討します。 だいぶ「予備知識」の項目が長くなってしまったので、処理だけ見たければここまで飛んでください。 ソース デモ 予備知識 センサーの座標系 スマホの画面を上に、画面の頭を北に向けて地面に置いたとき、 東西にX軸(東に向かって正) 南北にY軸(北に向かって正) 上下にZ軸(空に向かって正) となります。 また、原点から各軸の正の方向を見て時計回りを、正の回転とします。 いわゆる右手系です。 (例の右手の法則をかたどって親指がX、人差し指がY、中指