3dtransform-and-position-sticky-ref.html (664B)
1 <!DOCTYPE HTML> 2 <title>CSS Test Reference (Transforms): position:sticky on an element in a preserve-3d scene</title> 3 <link rel="author" title="L. David Baron" href="https://dbaron.org/"> 4 <link rel="author" title="Google" href="http://www.google.com/"> 5 6 <style> 7 8 div, img { 9 height: 100px; 10 width: 100px; 11 } 12 13 #outer { 14 transform-style: preserve-3d; 15 perspective: 300px; 16 } 17 18 #middle { 19 transform-style: preserve-3d; 20 position: relative; 21 background: aqua; 22 } 23 24 #inner2 { 25 background: olive; 26 position: absolute; 27 top: 0; 28 left: 0; 29 transform: rotateX(30deg); 30 } 31 32 </style> 33 34 <div id="outer"> 35 <div id="middle"> 36 <div id="inner2"> 37 </div> 38 </div> 39 </div>