Device Orientation

NetEase Media Technology Team

Jul 23, 2021 · Frontend Development

CSS Animation Techniques for Medal Unlock and Gyroscope Effects

The article explains how to create a seamless medal‑unlock animation using layered SVG clipPath tricks and a four‑step CSS process, and how to build an interactive gyroscope effect with deviceorientation events, while emphasizing performance‑friendly practices such as using transform, opacity, requestAnimationFrame, and avoiding reflow‑inducing properties.

3D effectsCSS animationDevice Orientation

0 likes · 10 min read

CSS Animation Techniques for Medal Unlock and Gyroscope Effects

360 Tech Engineering

Mar 1, 2019 · Frontend Development

What is the Screen Orientation API and How to Use It

The Screen Orientation API lets web applications read the device's current screen direction and angle, lock the orientation, and listen for changes, providing code examples, property details, and browser support guidance for enhancing user experience on video and gaming sites.

Device OrientationJavaScriptLock Screen

0 likes · 5 min read

What is the Screen Orientation API and How to Use It