outline-and-3d-transform-2.html (623B)
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 outline: 5px solid green; 23 } 24 25 body > div > div > div { 26 transform: rotateX(30deg); 27 width: 50px; margin-left: 25px; 28 transform-origin: 50% 50%; 29 transform-style: preserve-3d; 30 outline: 5px solid blue; 31 } 32 33 </style> 34 35 <div><div><div></div></div></div>