mask-layer-2.html (586B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>border-radius should work correctly for elements with perspective and 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 perspective: 1000px; 16 } 17 18 #b { 19 height: 100%; 20 transform-style: preserve-3d; 21 transform: rotateX(90deg); 22 } 23 24 #c { 25 position: relative; 26 background: green; 27 height: 100%; 28 width: 10000px; 29 transform: rotateX(90deg); 30 } 31 </style> 32 33 <div id="a"> 34 <div id="b"> 35 <div id="c"></div> 36 </div> 37 </div>