offset-path-ray-contain-001-ref.html (668B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths with contain</title> 5 <style> 6 #container { 7 width: 300px; 8 height: 300px; 9 } 10 #target { 11 position: relative; 12 left: 30px; 13 top: 40px; 14 width: 10px; 15 height: 10px; 16 background-color: lime; 17 /* ray length is sqrt(30^2 + 40^2); contain does -max(10, 10) / 2; */ 18 /* the result length is 45px. angle is 180deg; */ 19 /* 5 is origin shift. */ 20 transform: translate(-5px, 40px); 21 } 22 </style> 23 </head> 24 <body> 25 <div id="container"> 26 <div id="target"></div> 27 </div> 28 </body> 29 </html>