3d-rendering-context-and-z-ordering-003.html (1233B)
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="Philip Rogers" href="mailto:pdr@google.com"> 5 <link rel="author" title="Google" href="http://www.google.com/"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 7 <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."> 8 <link rel="match" href="transform-lime-square-ref.html"> 9 <style> 10 11 #contain { 12 position: relative; 13 padding-top: 5px; 14 } 15 16 #wrapper { 17 width: 30px; 18 height: 30px; 19 margin-top: 20px; 20 margin-left: 20px; 21 } 22 23 #cube { 24 width: 15px; 25 height: 15px; 26 transform-style: preserve-3d; 27 column-count: 5; 28 } 29 30 #face { 31 width: 15px; 32 height: 15px; 33 transform: translateX(5px); 34 background: red; 35 column-span: all; 36 } 37 38 #tooltip { 39 position: absolute; 40 background: lime; 41 width: 100px; 42 height: 100px; 43 top: 0; 44 left: 0; 45 } 46 47 </style> 48 49 <div id="contain"> 50 <div id="wrapper"> 51 <div id="cube"> 52 <div id="face"></div> 53 </div> 54 </div> 55 56 <div id="tooltip"></div> 57 </div>