With the advent of Virtual and Augmented reality, a new style of 3D interfaces is emerging. We are no longer limited to flat screens; instead the user interface can be broken up in sections and positioned within your 3D space (for VR) or the real world (for AR).
Browser vendors are developing WebXR for WebGL rendered content and are experimenting with basic 3D models and other interactive experiences. However, until now it was not possible to position CSS generated content in 3D.
Our goal is to break off parts of web page into the 3-d space around the browser surface.
This would make viewing web pages a much more immersive experience rather than looking at a rectangular surface. We hope to do accomplish this by introducing a small addition to CSS.
We propose to introduce a new value for transform-style: detached.
This new property builds upon the existing 3D transforms that are shipping in all browsers and extends the behavior of transform-style: preserve-3d. The main difference is that instead of flattening the transformed elements back to the page, the transformed element stays in 3D space.
If transform-style: detached is specified on an element, children with 3D transforms will be lifted out of the page.
Here is an example rendering of the effect:
As the page or a parent element scrolls, the detached element should scroll. CSS animations and transitions will apply as well.
Because we don't want to render content anywhere in the user's space, we also propose to define a "safe space" around the browser.
Content can not be placed outside this space.
Example:
<!DOCTYPE html>
<html>
<head>
<style>
.scene {
transform-style: detached;
}
.element {
transform: rotateY(30deg) translateZ(25px); }
}
</style>
</head>
<body>
<div id="scene">
<div id="element">This is detached text</div>
</div>
</body>
1. Transform-style 'detached' behaves like 'preserve-3d' on platforms which do not support page decomposition.
We don't want authors to design different CSS for immersive vs flat browsers. If a user agent renders on a flat surface, it can use the 'preserve-3d' value which will render the page visually the same.
2. When detached elements are nested, only the top most element will signal that its children at detached
Allowing detached descendants of detached nodes significantly complicates the implementation and introduces multiple corner cases. We propose that descendents with detached are treated as preserve-3d
The detached elements and their descendants are rendered onto surfaces that are distinct from their parents. Any effect applied to parents will be applied during the compositing stage and will not be applied to the detached elements.
Effects that cause flattening (ie filters, opacity) will cause the element to revert to flat behavior.
iframes should not be allowed to created detached content. This feature will only be available to the main frame. In iframes, detached will be treated at preserve-3d.
Another possibility is to apply the detached value to elements under the preserve-3d style. For instance:
<!DOCTYPE html>
<html>
<head>
<style>
.scene {
transform-style: preserve-3d;
}
.element {
transform-style: detached;
transform: rotateY(30deg) translateZ(25px); }
}
</style>
</head>
<body>
<div id="scene">
<div id="element">This is detached text</div>
</div>
</body>
Many thanks for valuable feedback and advice from: