| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <style> | 2 <style> |
| 3 div { | 3 div { |
| 4 width: 100px; | 4 width: 100px; |
| 5 height: 100px; | 5 height: 100px; |
| 6 position: absolute; | 6 position: absolute; |
| 7 transform-origin: 0% 0%; | 7 transform-origin: 0% 0%; |
| 8 offset-anchor: 0% 0%; |
| 8 } | 9 } |
| 9 | 10 |
| 10 /* Note the order of the scaling operation affects the path coordinates */ | 11 /* Note the order of the scaling operation affects the path coordinates */ |
| 11 #target { | 12 #target { |
| 12 background-color: red; | 13 background-color: red; |
| 13 translate: 200px 10px; | 14 translate: 200px 10px; |
| 14 rotate: 90deg; | 15 rotate: 90deg; |
| 15 scale: 1 2; | 16 scale: 1 2; |
| 16 motion: path("m 0 0 v -20 h 20") 0rad 100%; | 17 motion: path("m 0 0 v -20 h 20") 0rad 100%; |
| 17 } | 18 } |
| 18 #expected { | 19 #expected { |
| 19 background-color: green; | 20 background-color: green; |
| 20 transform: translate(240px, 30px) rotate(90deg) scale(1, 2); | 21 transform: translate(240px, 30px) rotate(90deg) scale(1, 2); |
| 21 } | 22 } |
| 22 </style> | 23 </style> |
| 23 | 24 |
| 24 <p>There should be no red color boxes</p> | 25 <p>There should be no red color boxes</p> |
| 25 <div id="target"></div> | 26 <div id="target"></div> |
| 26 <div id="expected"></div> | 27 <div id="expected"></div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2461603003:
CSS Motion Path: Place offset-anchor on the path (Closed)
