perspective-zindex.html (584B)
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 perspective: 300px; 10 perspective-origin: top left; 11 } 12 13 #front { 14 z-index: 2; 15 width: 100px; 16 height: 100px; 17 background-color: #00FF00; 18 transform: translateX(0px); 19 position: relative; 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 id="back"></div> 36 </div>