nonuniform-scale-2d.html (849B)
1 <!DOCTYPE html> 2 <!-- Any copyright is dedicated to the Public Domain. 3 - http://creativecommons.org/publicdomain/zero/1.0/ --> 4 <head> 5 <style> 6 body { 7 border: 0px; 8 margin: 0px; 9 padding: 0px; 10 } 11 img { 12 width: 100px; 13 height: 100px; 14 transform-origin: 0 0 0; 15 } 16 </style> 17 </head> 18 <body> 19 <img src="blue-square-in-square.svg"> 20 21 <script> 22 var scales = location.search.substring(1).split("&"); 23 var xScale = scales[0]; 24 var yScale = scales[1]; 25 26 // Create a style representing a 2d transform. 27 var style = 'transform: matrix(' + xScale + ', 0,' + 28 '0, ' + yScale + ',' + 29 '0, 0);'; 30 31 // Apply the style to the image. 32 var img = document.getElementsByTagName("img")[0]; 33 img.style = style; 34 </script> 35 </body>