view-transition-name-is-grouping.html (724B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: view-transition-name non-none value is a grouping value</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="view-transition-name-is-grouping-ref.html"> 7 8 <style> 9 .parent { 10 top: 0; 11 width: 100px; 12 height: 100px; 13 position: absolute; 14 background: red; 15 transform-style: preserve-3d; 16 view-transition-name: target; 17 } 18 19 .child { 20 background: green; 21 width: 100px; 22 height: 100px; 23 top: 0; 24 left: 0; 25 position: absolute; 26 transform: translateZ(-500px); 27 } 28 29 body { 30 perspective: 1000px; 31 height: 500px; 32 } 33 </style> 34 35 <div class=parent><div class=child></div></div>