offset-path-ray-contain-004-ref.html (662B)
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: 100px; 13 top: 100px; 14 width: 100px; 15 height: 100px; 16 background-color: lime; 17 /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */ 18 /* the result length is 100. sin(45deg) * length = 70.71; */ 19 transform: rotate(-45deg) translate(100px); 20 } 21 </style> 22 </head> 23 <body> 24 <div id="container"> 25 <div id="target"></div> 26 </div> 27 </body> 28 </html>