fractional-translation-from-transform-ref.html (811B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: fractional translation from CSS transform (ref)</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:khushalsagar@chromium.org"> 6 <style> 7 body { 8 width: 100vw; 9 height: 100vh; 10 background: grey; 11 } 12 13 #composited { 14 width: 100px; 15 height: 100px; 16 position: fixed; 17 top: 0px; 18 left: 0px; 19 transform: translate(100.52px, 100.37px); 20 will-change: transform; 21 22 view-transition-name: target; 23 } 24 25 #noncomposited { 26 width: 100px; 27 height: 100px; 28 position: fixed; 29 top: 0px; 30 left: 0px; 31 transform: translate(100.52px, 250.37px); 32 33 view-transition-name: target; 34 } 35 </style> 36 37 <div id=composited> 38 XXXXXXX XXXXXXX XXXXXXX XXXXXXX 39 </div> 40 <div id=noncomposited> 41 XXXXXXX XXXXXXX XXXXXXX XXXXXXX 42 </div>