mask-layer-3.html (547B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>border-radius should work correctly for elements with preserve-3d</title> 5 6 <style> 7 8 #a { 9 position: relative; 10 width: 300px; 11 height: 300px; 12 border-radius: 10px; 13 overflow: hidden; 14 background: red; 15 } 16 17 #b { 18 height: 100%; 19 transform-style: preserve-3d; 20 transform: rotateX(90deg); 21 } 22 23 #c { 24 position: relative; 25 background: green; 26 height: 100%; 27 width: 10000px; 28 transform: rotateX(90deg); 29 } 30 </style> 31 32 <div id="a"> 33 <div id="b"> 34 <div id="c"></div> 35 </div> 36 </div>