Chromium Code Reviews| OLD | NEW |
|---|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <html> | 2 <html> |
| 3 <head> | 3 <head> |
| 4 <style> | 4 <style> |
| 5 | 5 |
| 6 div { | |
|
pdr.
2015/10/30 00:52:04
Was this needed?
Eric Willigers
2015/11/20 07:49:53
With parent width 800px, the default transform-ori
| |
| 7 width: 800px; | |
| 8 } | |
| 9 | |
| 6 span { | 10 span { |
| 7 position: absolute; | 11 position: absolute; |
| 8 width: 120px; | 12 width: 120px; |
| 9 line-height: 120px; | 13 line-height: 120px; |
| 10 text-align: center; | 14 text-align: center; |
| 11 color: yellow; | 15 color: yellow; |
| 12 } | 16 } |
| 13 | 17 |
| 14 #span1 { | 18 #span1 { |
| 15 z-index: 2; | 19 z-index: 2; |
| 16 left: 50px; | 20 left: 50px; |
| 17 top: 50px; | 21 top: 50px; |
| 18 background: red; | 22 background: red; |
| 19 } | 23 } |
| 20 | 24 |
| 21 #span2 { | 25 #span2 { |
| 22 z-index: 1; | 26 z-index: 1; |
| 23 left: 100px; | 27 left: 100px; |
| 24 top: 100px; | 28 top: 100px; |
| 25 background: green; | 29 background: green; |
| 26 } | 30 } |
| 27 | 31 |
| 28 #span3 { | 32 #span3 { |
| 29 left: 150px; | 33 left: 150px; |
| 30 top: 150px; | 34 top: 150px; |
| 31 background: blue; | 35 background: blue; |
| 32 } | 36 } |
| 33 | 37 |
| 34 #div1 { | 38 #div1 { |
| 35 motion-path: path('M0,0'); | 39 motion-path: path('M400,0'); |
| 36 } | 40 } |
| 37 | 41 |
| 38 #div2 { | 42 #div2 { |
| 39 motion-path: none; | 43 motion-path: none; |
| 40 } | 44 } |
| 41 | 45 |
| 42 </style> | 46 </style> |
| 43 </head> | 47 </head> |
| 44 <body> | 48 <body> |
| 45 | 49 |
| 46 <div id="div1"> | 50 <div id="div1"> |
| 47 <span id="span1">First</span> | 51 <span id="span1">First</span> |
| 48 </div> | 52 </div> |
| 49 <div id="div2"> | 53 <div id="div2"> |
| 50 <span id="span2">Second</span> | 54 <span id="span2">Second</span> |
| 51 </div> | 55 </div> |
| 52 <div id="div3"> | 56 <div id="div3"> |
| 53 <span id="span3">Third</span> | 57 <span id="span3">Third</span> |
| 54 </div> | 58 </div> |
| 55 | 59 |
| 56 </body> | 60 </body> |
| 57 </html> | 61 </html> |
| OLD | NEW |