offset-path-ray-019-ref.html (824B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Motion Path: ray paths</title> 5 <style> 6 #container1 { 7 width: 100px; 8 height: 100px; 9 } 10 #container2 { 11 width: 200px; 12 height: 200px; 13 } 14 #target1 { 15 position: relative; 16 width: 50px; 17 height: 50px; 18 background-color: lime; 19 transform-origin: 0px 0px; 20 transform: translateX(100px); 21 } 22 #target2 { 23 position: relative; 24 width: 50px; 25 height: 50px; 26 background-color: lime; 27 transform-origin: 0px 0px; 28 transform: translateX(200px); 29 } 30 </style> 31 </head> 32 <body> 33 <div id="container1"> 34 <div id="target1"></div> 35 </div> 36 <div id="container2"> 37 <div id="target2"></div> 38 </div> 39 </body> 40 </html>