offset-rotate-002.html (871B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: offset-rotate</title> 5 <link rel="author" title="Eric Willigers" href="mailto:ericwilligers@chromium.org"> 6 <link rel="help" href="https://drafts.fxtf.org/motion-1/#offset-rotate-property"> 7 <link rel="match" href="offset-rotate-ref.html"> 8 <meta name="viewport" content="width=device-width,initial-scale=1"> 9 <meta name="assert" content="This tests offset-rotate reverse <angle>"> 10 <style> 11 #target { 12 position: absolute; 13 left: 300px; 14 top: 100px; 15 width: 300px; 16 height: 200px; 17 background-color: lime; 18 transform-origin: 0px 0px; 19 offset-path: ray(-120deg closest-corner); 20 offset-rotate: reverse 60deg; 21 offset-position: auto; 22 } 23 </style> 24 </head> 25 <body> 26 <div id="target"></div> 27 </body> 28 </html>