switch(orientation) case 'portrait-primary': degrees = 0; break; case 'portrait-secondary': degrees = 180; break; case 'landscape-primary': degrees = 90; break; case 'landscape-secondary': degrees = 270; break;
.rotation-menu button padding: 10px 16px; border: none; background: white; text-align: left; cursor: pointer; transition: background 0.2s;
.rotate-button:hover background: rgba(0, 0, 0, 0.9); transform: scale(1.05); rotate the screen shortcut
// Handle orientation change for auto-rotate window.addEventListener('orientationchange', () => if (this.isAutoRotate) this.handleOrientationChange(); );
// Apply rotation to body or specific container document.body.style.transform = `rotate($degreesdeg)`; document.body.style.transition = 'transform 0.3s ease'; switch(orientation) case 'portrait-primary': degrees = 0
.rotation-menu.active display: flex;
1. HTML Structure <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> <div class="rotation-menu" id="rotationMenu"> <button data-rotation="0">Default (0°)</button> <button data-rotation="90">Rotate 90°</button> <button data-rotation="180">Rotate 180°</button> <button data-rotation="270">Rotate 270°</button> <button data-rotation="auto">Auto-rotate</button> </div> </div> 2. CSS Styling .rotation-shortcut position: fixed; bottom: 20px; right: 20px; z-index: 9999; case 'portrait-secondary': degrees = 180
.rotate-button display: flex; align-items: center; gap: 8px; padding: 10px 16px; background: rgba(0, 0, 0, 0.8); color: white; border: none; border-radius: 8px; cursor: pointer; backdrop-filter: blur(10px); transition: all 0.3s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.2);