outline-and-3d-transform-1b.html (704B)
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 outline: 2px dashed blue; 17 } 18 19 body > div > div { 20 transform: rotateX(90deg); 21 transform-origin: 50% 50%; 22 transform-style: preserve-3d; 23 } 24 25 body > div > div > div { 26 transform: rotateX(-30deg); 27 transform-origin: 50% 50%; 28 transform-style: preserve-3d; 29 } 30 31 body > div > div > div > div { 32 transform: scale(1.5, 3); 33 transform-origin: 50% 50%; 34 background: rgba(255, 255, 0, 0.4); 35 } 36 37 38 </style> 39 40 <div><div><div><div></div></div></div></div>