offset-rotate-005.html (1252B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Motion Path: offset-rotate</title> 5 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> 6 <link rel="match" href="offset-rotate-ref.html"> 7 <meta name="assert" content="This tests offset-rotate reverse <angle> with path()"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <style> 10 #target { 11 position: absolute; 12 left: 300px; 13 top: 100px; 14 width: 300px; 15 height: 200px; 16 background-color: lime; 17 transform-origin: 0px 0px; 18 offset-rotate: reverse 60deg; 19 } 20 </style> 21 <script> 22 function test() { 23 let target = document.getElementById('target'); 24 // Get a path which has the same direction as "ray(-120deg ...)" 25 let verticalMove = 100 * Math.tan(30 * Math.PI / 180); 26 target.style.offsetPath = `path("m 0 0 l -100 ${verticalMove}")`; 27 window.getComputedStyle(target).offsetPath; 28 29 window.requestAnimationFrame(function() { 30 document.documentElement.removeAttribute('class'); 31 }); 32 } 33 </script> 34 </head> 35 <body onload='test()'> 36 <div id="target"></div> 37 </body> 38 </html>