Concepts
Transforms And CSS
The CSS custom property contract for transforms, opacity, materials, and typed property registration.
Transforms And CSS
StringTune-3D is CSS-first by design. The module injects a base stylesheet and registers typed properties when the browser supports CSS.registerProperty.
Core transform inputs
| Variable | Default | Effect |
|---|---|---|
--translate-x | 0 | X offset in pixels |
--translate-y | 0 | Y offset in pixels |
--translate-z | 0 | Z offset in pixels |
--rotate-x | 0 | Rotation in degrees |
--rotate-y | 0 | Rotation in degrees |
--rotate-z | 0 | Rotation in degrees |
--scale | 1 | Uniform scale multiplier |
--scale-x | 1 | Per-axis scale multiplier |
--scale-y | 1 | Per-axis scale multiplier |
--scale-z | 1 | Per-axis scale multiplier |
--opacity | 1 | Material opacity |
Visual DOM helper
The injected CSS also defines a visual helper selector:
[string-3d-visual='true'] {
transform:
translate3d(...)
rotateX(...)
rotateY(...)
rotateZ(...)
scale3d(...);
}
That helper is separate from the 3D scene. It exists for DOM-side visual syncing where needed.
Typed property rule
Typed registration improves CSS transitions on custom properties, but the runtime does not require it to function.
CSS transitions are the animation layer
For transforms, the intended animation path is plain CSS on the same custom properties that drive the scene.
[string-id='card'] {
transition:
--rotate-y 360ms ease,
--translate-z 360ms ease;
}
[string-id='card']:hover {
--rotate-y: 10;
--translate-z: 120;
}
StringTune-3D then reads the animated values through getComputedStyle() during synchronization. In practice, that means you animate the DOM contract and the 3D object follows it.
Material variables live in the same contract
The module also registers material, light, texture, particle, text, and SVG variables. That is why many runtime features can be animated with pure CSS transitions.