3d-rendering-context-and-z-ordering-001.html (1124B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): Sorting outside of the 3-D Rendering Context</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 6 <meta name="assert" content="The #wrapper element is the root of the 3-D rendering context, so #tooltip should render on top of it per normal CSS z-ordering rules."> 7 <link rel="match" href="transform-lime-square-ref.html"> 8 <style> 9 10 #contain { 11 position: relative; 12 padding-top: 5px; 13 } 14 15 #wrapper { 16 width: 30px; 17 height: 30px; 18 margin-top: 20px; 19 margin-left: 20px; 20 } 21 22 #cube { 23 width: 15px; 24 height: 15px; 25 transform-style: preserve-3d; 26 } 27 28 #face { 29 width: 15px; 30 height: 15px; 31 transform: translateZ(75px); 32 background: red; 33 } 34 35 #tooltip { 36 position: absolute; 37 background: lime; 38 width: 100px; 39 height: 100px; 40 top: 0; 41 left: 0; 42 } 43 44 </style> 45 46 <div id="contain"> 47 <div id="wrapper"> 48 <div id="cube"> 49 <div id="face"></div> 50 </div> 51 </div> 52 53 <div id="tooltip"></div> 54 </div>