outline-and-3d-transform-2-ref.html (655B)
1 <!DOCTYPE HTML> 2 <title>Testcase for outline around 3-D transform</title> 3 <style> 4 5 html, body { margin: 0; padding: 0; border: none } 6 7 div { 8 width: 100px; 9 height: 100px; 10 } 11 12 body > div { 13 margin-top: 200px; 14 margin-left: 200px; 15 transform-style: flat; 16 } 17 18 body > div > div { 19 transform: rotateX(30deg); 20 transform-origin: 50% 50%; 21 transform-style: preserve-3d; 22 border: 5px solid green; 23 margin: -5px; 24 } 25 26 body > div > div > div { 27 transform: rotateX(30deg); 28 width: 50px; margin-left: 20px; margin-top: -5px; 29 transform-origin: 50% 50%; 30 transform-style: preserve-3d; 31 border: 5px solid blue; 32 } 33 34 </style> 35 36 <div><div><div></div></div></div>