perspective-zindex-2.html 538 B

1234567891011121314151617181920212223242526272829303132333435
  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. <style>
  6. #perspective {
  7. z-index: 2;
  8. perspective: 300px;
  9. perspective-origin: top left;
  10. }
  11. #front {
  12. width: 100px;
  13. height: 100px;
  14. background-color: #00FF00;
  15. transform: translateX(0px);
  16. }
  17. #back {
  18. z-index: 1;
  19. width: 100px;
  20. height: 100px;
  21. background-color: #FF0000;
  22. transform: translateY(-100px);
  23. }
  24. </style>
  25. <div id="perspective">
  26. <div id="front"></div>
  27. </div>
  28. <div id="back"></div>