perspective-zindex-2.html (582B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <meta charset="utf-8"> 4 <title>z-index should work correctly for elements with perspective</title> 5 6 <style> 7 8 #perspective { 9 z-index: 2; 10 position: relative; 11 perspective: 300px; 12 perspective-origin: top left; 13 } 14 15 #front { 16 width: 100px; 17 height: 100px; 18 background-color: #00FF00; 19 transform: translateX(0px); 20 } 21 22 #back { 23 z-index: 1; 24 width: 100px; 25 height: 100px; 26 background-color: #FF0000; 27 transform: translateY(-100px); 28 position: relative; 29 } 30 31 </style> 32 33 <div id="perspective"> 34 <div id="front"></div> 35 </div> 36 <div id="back"></div>