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

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

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 is 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](https://xiry.app/topics/development.md)
- 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](https://x.com/shuding/status/2033146453586296980): 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

- [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source)
- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)
- [Osmo](https://xiry.app/resources/osmo): Resource vault and toolkit of animations, components, and transitions for Webflow and HTML (Website, Paid)
- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [Animmaster Lib](https://xiry.app/resources/animmaster-lib): Catalog of 300 animated frontend UI components, shaders, and effects (Website, Paid)
- [CSS Card Parallax with Pointermove and Custom Properties](https://xiry.app/resources/css-card-parallax-with-pointermove-and-custom-properties): CSS recipe for interactive 3D card tilt and 2D layer parallax (Tip, Free)

Updated 11 October 2026. Page: https://xiry.app/resources/anchoring-dom-labels-to-a-3d-globe-with-css-anchor-positioni

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.