nonuniform-scale-3d.html (969B)
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 var zScale = scales[2]; 26 27 // Create a style representing a 3d transform. 28 var style = 'transform: matrix3d(' + xScale + ', 0, 0, 0,' + 29 '0, ' + yScale + ', 0, 0,' + 30 '0, 0, ' + zScale + ', 0,' + 31 '0, 0, 0, 1);'; 32 33 // Apply the style to the image. 34 var img = document.getElementsByTagName("img")[0]; 35 img.style = style; 36 </script> 37 </body>