xiry.

Development · Tip

Anchoring DOM Labels to a 3D Globe with CSS Anchor Positioning

Declaratively anchor and toggle DOM markers on 3D scenes with CSS

From the Xiry library · Updated 11 October 2026

This technique combines the native CSS position-anchor API with CSS variables to bind interactive HTML elements to rotating 3D globe coordinates. By dynamically setting and unsetting CSS custom properties for visibility, you can handle marker fading, transitions, and transforms entirely in CSS without per-frame JavaScript DOM manipulation.

How it works

It creatively uses CSS-native APIs, position-anchor and CSS variable. Here's how you style a label without any JS: Your marker automatically follows the anchored position on the 3D space. Use the --cobe-visible- prefixed variable to toggle between visible/invisible styles.

What it's for

  • Anchor interactive HTML tooltips or badges to points on a 3D globe canvas
  • Fade out hidden markers automatically when they rotate to the back of a 3D object using CSS transitions
  • Apply native CSS filters, animations, and hover states to 3D data points

Key points

  • Uses native CSS position-anchor to pin DOM elements directly to 3D canvas coordinates
  • Uses dynamic CSS variable injection to indicate front/back hemisphere visibility
  • Employs CSS fallback syntax to trigger smooth opacity transitions without JavaScript render loops
  • Preserves full native DOM interactivity, including clicks, hover states, and accessibility

Pricing

Free

Details

Type
Tip
Category
Development
Topic
CSS & Frontend
Open source
Yes
Platforms
Web
For
Frontend developers and creative coders working with WebGL or 3D canvas overlays.
Alternative to
Three.js CSS2DRenderer
Tags
css, css anchor, webgl, cobe, 3d, frontend

Why it was saved

  • @shuding, 15 March 2026: A novel, declarative CSS-native pattern for toggling DOM element styles based on 3D visibility, using the newly adopted CSS anchor positioning API; directly reusable and conceptually valuable for any 3D-scene + DOM-layer work.

Related

Updated