Whether you accidentally flipped your display upside down or you're setting up a vertical monitor for coding, knowing the can save you from a lot of neck strain.
.rotation-shortcut position: fixed; bottom: 20px; right: 20px; z-index: 9999; rotate the screen shortcut
.rotate-icon width: 20px; height: 20px; fill: white; Whether you accidentally flipped your display upside down
this.rotationMenu.classList.remove('active'); ); ); .rotate-icon width: 20px
<div class="rotation-shortcut"> <button id="rotateBtn" class="rotate-button" title="Rotate Screen"> <svg class="rotate-icon" viewBox="0 0 24 24"> <path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v4l5-5-5-5v4z"/> </svg> <span>Rotate</span> </button>
setupEventListeners() // Toggle menu this.rotateBtn.addEventListener('click', (e) => e.stopPropagation(); this.rotationMenu.classList.toggle('active'); );
// Initialize when DOM is ready document.addEventListener('DOMContentLoaded', () => new ScreenRotationShortcut(); );