transform-table-010.html (1498B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Table With Preserve-3D 2</title> 5 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#transform-style-property"> 7 <meta name="assert" content="This is the same as transform-table-007.html, 8 except that now divs are used instead of actual table elements. This means 9 that the parser doesn't create an implicit intervening <tbody>, so 10 preserve-3d is applied to all intervening elements, and the text should 11 display (mirrored)."> 12 <link rel="match" href="transform-table-009-ref.html"> 13 <link rel="mismatch" href="transform-table-010-notref.html"> 14 <meta name="fuzzy" content="maxDifference=0-50;totalPixels=0-3"> 15 <style> 16 body > div { 17 transform: rotateX(90deg); 18 transform-style: preserve-3d; 19 } 20 body > div > div { 21 display: table; 22 transform-style: preserve-3d; 23 } 24 body > div > div > div { 25 display: table-row; 26 transform-style: preserve-3d; 27 } 28 body > div > div > div > div { 29 display: table-cell; 30 transform-style: preserve-3d; 31 } 32 body > div > div > div > div > div { 33 transform: rotateX(90deg); 34 } 35 </style> 36 </head> 37 <body> 38 <div> 39 <div> 40 <div> 41 <div> 42 <div>Some text</div> 43 </div> 44 </div> 45 </div> 46 </div> 47 </body> 48 </html>