1. 背景
Web ページの回転は、水平コンテンツを縦向きに回転したり、垂直コンテンツを横向きに回転したりするなど、Web コンテンツをさまざまな方向に表示できるようにする視覚効果です。これにより、Web ページがより柔軟になり、さまざまなシーンのニーズに適応できるようになります。
Web ページを回転する必要がある理由はいくつか考えられます。
-
地図、フローチャート、表など、一部のコンテンツは水平方向に表示する必要があります。垂直方向の表示に制限されている場合、情報が不完全または不明確になる可能性があります。
-
Web ページのレイアウトを調整する必要がある: 一部の Web ページは水平表示効果を念頭に置いて設計されている場合があり、Web ページを回転することでより優れた視覚効果を実現できます。
-
個人の好みと習慣: ユーザーによっては、水平スクロールを使用して Web ページを閲覧することに慣れている場合や、Web ページの水平レイアウトを好む場合がありますが、Web ページを回転することでこれらのニーズを満たすことができます。
-
特殊なアプリケーション シナリオ: デジタル署名、電子書籍リーダーなど、一部のアプリケーション シナリオでは水平表示が必要です。
つまり、Web ページのローテーションは主に、Web ページのコンテンツをより適切に表示し、ユーザー エクスペリエンスを向上させるために必要です。
2. コードの実装
2.1. 開発者ツールを開く
Google Chrome で Web ページを適切に回転するには、回転する必要がある Web ページのアドレスを開き、F12 キーを押してブラウザの開発者ツール パネルを開きます。
以下の図に示すように、 Baidu Web サイトを例に挙げます。
右側の例は次のとおりです。
2.2. Web ページのローテーション スクリプト
2.2.1. 反時計回りに 90 度回転
次のスクリプトを開発者ツールにコピーし、Enter キーを押します。
# 逆时针旋转 90 度
document.body.style.cssText+="-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg)";
回転効果を次の図に示します。
2.2.2. 反時計回りに 180 度回転
次のスクリプトを開発者ツールにコピーし、Enter キーを押します。
# 逆时针旋转 180 度
document.body.style.cssText+="-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg)";
回転効果を次の図に示します。
2.2.3. 反時計回りに 270 度回転
次のスクリプトを開発者ツールにコピーし、Enter キーを押します。
# 逆时针旋转 270 度
document.body.style.cssText+="-webkit-transform: rotate(-270deg);-moz-transform: rotate(-270deg)";
回転効果を次の図に示します。
2.3. Web ページ回転スクリプトの概要
上記の操作を通じて、Web ページの回転スクリプトは非常に似ていますが、実際にはパラメーターが異なることがわかりました。
# 网页旋转脚本参数讲解，不要用这个
document.body.style.cssText+="-webkit-transform: rotate(我是旋转角度参数);-moz-transform: rotate(我是旋转角度参数)";
# 逆时针旋转 90 度和顺时针旋转 270 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(-90deg);-moz-transform: rotate(-90deg)";
# 逆时针旋转 180 度和顺时针旋转 180 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(-180deg);-moz-transform: rotate(-180deg)";
# 逆时针旋转 270 度和顺时针旋转 90 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(-270deg);-moz-transform: rotate(-270deg)";
# 顺时针旋转 90 度和逆时针旋转 270 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(90deg);-moz-transform: rotate(90deg)";
# 顺时针旋转 180 度和逆时针旋转 180 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg)";
# 顺时针旋转 270 度和逆时针旋转 90 度效果一样
document.body.style.cssText+="-webkit-transform: rotate(270deg);-moz-transform: rotate(270deg)";
Web ページが 360 度回転しないのはなぜですか? これを説明できるほど賢い人はいますか？コメント欄に返信するか、ブロガーにプライベート メッセージを送信して、ご意見やご提案を共有してください。
このチュートリアルはここで終了します。皆さんが楽しくプログラミングの旅を探索し、学習し、成長できることを願っています。