offset-path-ray-contain-005-ref.html (845B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths with contain</title> 5 <style> 6 #container { 7 width: 250px; 8 height: 250px; 9 transform: translate(100px); 10 } 11 #target { 12 position: relative; 13 left: 50px; 14 top: 50px; 15 width: 150px; 16 height: 25px; 17 background-color: lime; 18 /* 19 * The original path length is 50px, contain applies 20 * decrease, so that the new length is -25px (-150px / 2). 21 * Note: offset-anchor is "200% -300%", and ray angle is -90deg 22 and offset-rotate is -90deg. 23 */ 24 transform: translate(-75px, -12.5px) rotate(-90deg) translate(-225px, 87.5px); 25 } 26 </style> 27 </head> 28 <body> 29 <div id="container"> 30 <div id="target"></div> 31 </div> 32 </body> 33 </html>