3d-transform-incoming-ref.html (635B)
1 <!DOCTYPE html> 2 <title>View transitions: 3d transform ref</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 div { box-sizing: border-box; will-change: transform } 7 .wrap_perspective { 8 perspective: 100px; 9 width: max-content; 10 transform: translate(200px); 11 } 12 .rotatex { 13 transform-style: preserve-3d; 14 transform: rotateX(20deg); 15 background: blue; 16 } 17 .shared { 18 width: 100px; 19 height: 100px; 20 view-transition-name: shared; 21 } 22 body { background: pink } 23 24 </style> 25 26 <div class="wrap_perspective"><div class="rotatex shared"></div></div>