3d-rendering-context-and-z-ordering-002.html (1147B)
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 perspective: 700px; 22 } 23 24 #cube { 25 width: 15px; 26 height: 15px; 27 transform-style: preserve-3d; 28 } 29 30 #face { 31 width: 15px; 32 height: 15px; 33 transform: translateZ(75px); 34 background: red; 35 } 36 37 #tooltip { 38 position: absolute; 39 background: lime; 40 width: 100px; 41 height: 100px; 42 top: 0; 43 left: 0; 44 } 45 46 </style> 47 48 <div id="contain"> 49 <div id="wrapper"> 50 <div id="cube"> 51 <div id="face"></div> 52 </div> 53 </div> 54 55 <div id="tooltip"></div> 56 </div>