preserve3d-nested-perspective.html (980B)
1 <!doctype html> 2 <title>CSS Test: nested preserve-3d and perspective without transformed items</title> 3 <link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> 4 <link rel="author" href="https://mozilla.org" title="Mozilla"> 5 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#perspective"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-2/#transform-style-property"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1505222"> 8 <link rel="match" href="preserve3d-nested-perspective-ref.html"> 9 <style> 10 html, body { margin: 0 } 11 #box { 12 width: 100px; 13 height: 100px; 14 background: green; 15 } 16 </style> 17 <!-- Since we don't specify any transform, this should render just a 100x100px red box --> 18 <div style="perspective: 1200px"> 19 <div style="transform-style: preserve-3d"> 20 <div style="transform-style: flat"> 21 <div id="box" style="transform-style: preserve-3d"></div> 22 </div> 23 </div> 24 </div>