Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-transforms/backface-visibility-with-sibling-001.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<title>backface-visibility test</title>
<link rel="match" href="/common/blank.html">
<meta name="assert" content="The backface-visibility property still works correctly when there is an element outside the 3-D rendering context that is, in tree order, in between the element with backface-visibility and the root of the 3-D Rendering Context">
<style>
div {
width: 100px;
height: 100px;
}
#outer {
transform-style: preserve-3d;
transform: rotateX(120deg);
position: relative;
}
#outer > div {
position: absolute;
top: 0;
left: 0;
}
#grandchild {
transform: translateZ(1px);
}
#child2 {
transform-style: preserve-3d;
transform: translateX(0);
backface-visibility: hidden;
background: red;
}
</style>
<div id="outer">
<div id="child1"><div id="grandchild"></div></div>
<div id="child2"></div>
</div>