transform-3d-scales-different-x-y-dynamic-002-ref.html (740B)
1 <!DOCTYPE html> 2 <meta charset="utf-8" /> 3 <title>CSS Reftest Reference</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> 5 <style> 6 body { 7 margin: 0; 8 overflow: clip; 9 } 10 .test:nth-of-type(even) { 11 color: white; 12 } 13 .test { 14 position: absolute; 15 width: 0; 16 transform-origin: 0 0; 17 border-right: 25px solid transparent; 18 border-top: calc(25px * var(--scale)) solid currentcolor; 19 transform: scale3d(var(--scale), 1, 1); 20 } 21 </style> 22 <body> 23 <script> 24 "use strict"; 25 for (let i = 1; i < 14; ++i) { 26 const test = document.createElement("div"); 27 test.className = "test"; 28 test.style.setProperty("--scale", i * 4); 29 test.style.setProperty("z-index", -i); 30 document.body.appendChild(test); 31 } 32 </script> 33 </body>