3d-rendering-context-and-inline.html (953B)
1 <!DOCTYPE HTML> 2 <title>CSS Test (Transforms): 3D Rendering Context following DOM Tree (inlines)</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="https://drafts.csswg.org/css-transforms-2/#3d-rendering-contexts"> 6 <meta name="assert" content="Blocks inside of inlines participate in 3D Rendering Contexts based on their parent, not their containing block."> 7 <link rel="match" href="transform-blank-ref.html"> 8 9 <style> 10 11 .outer { 12 display: block; 13 width: 100px; 14 height: 100px; 15 transform-style: preserve-3d; 16 transform: rotateX(90deg); 17 } 18 19 .middle { 20 display: inline; 21 } 22 23 .inner { 24 display: block; 25 width: 100px; 26 height: 100px; 27 transform: rotateX(-90deg); 28 background: red; 29 } 30 31 </style> 32 33 <p>Nothing should appear except this sentence.</p> 34 35 <div class="outer"> 36 <div class="middle"> 37 <div class="inner"></div> 38 </div> 39 </div>