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 the user's 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, positioning CSS generated content in 3D was not possible.
Our goal is to break off parts of web page into the 3D 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 accomplish this by introducing a small addition to CSS.
We propose to introduce a new value for transform: detached.
This new property builds upon the existing 3D transforms that are shipping in all browsers and extends the behavior of transform attribute.
The main difference is that instead of flattening the transformed elements back to the page, the transformed element stays in 3D space.
If transform: detached is specified on an element, the element will be rendered to a separate surface and positioned using the cumulative 3d transform applied to the element.
Example:
<!DOCTYPE html>
<html class="parent">
<head>
<style>
.parent { transform-style: preserve-3d; }
.element { transform: detached rotateY(30deg) translateZ(25px); }
</style>
</head>
<body class="parent">
<div class="parent">
<div class="element"> This is text on a detached surface </div>
</div>
</body>
</html>
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.
In order to disallow unrestricted access of user's space to the content developer, we also propose to define a "safe space" that shall be requested to the user by content developer and user consented.
Content can not be placed outside this space.
We don't want authors to design different CSS for immersive vs flat browsers.
If a user agent renders on a flat surface, transform detached is ignored and the element is rendered into the main surface
Thus the rendered page would appear visually similar on all platforms.
Transform style flat and effects that cause flattening (spec) will cause transform: detached to be ignored in descendant elements.
An implicit flat transform-style is applied to <html> tag. Implementing detached transform requires being able change transform-style of <html> tag to preserve-3d (as in above example).
Contents of <iframe> elements should not be allowed to created detached content.
This feature will only be available to the main frame.
Within <iframe> elements, detached transform will be ignored.
This is a corollary as transform-stye: preserve-3d does not create a stacking context and for an element to be detached all its parents (including document root) should have transform-style: preserve-3d.
Specifying transform-style: detached on an element would cause its children to be detached. For instance:
<!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>
</html>
In this alternative, on user agents that do not support detached elements, transform-style: detached would default to transform-style: preserve-3d to preserve visual similarity.
This introduces a ambiguity on how any children and grand-children with transform-style: preserve-3d will be treated.
1. Feedback from csswg
Concern was raised that a similar behavior could be achieved without introducing new transform or transform-style keywords.
In the alternative proposed by David Baron (with added details from Chris Harrelson), all surfaces that do not have a flattening parent will be detached. <html> tag would have to use transform-style: preserve-3d to allow detaching elements.
Chris Harrelson further proposed that surfaces which do not have detached parents and do not have transforms that would cause it to 'pop out' of the main surface can be left un-detached.
Josh Carpenter : Illustrations from slide deck