animate-preserve3d-ref.html (581B)
1 <!DOCTYPE HTML> 2 <html> 3 <title>Testcase, bug 1176969</title> 4 <style> 5 6 body { padding: 50px } 7 8 #grandparent { perspective: 400px } 9 10 #parent { 11 background: blue; 12 height: 200px; width: 200px; 13 border: 1px solid black; 14 transform-style: preserve-3d; 15 transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); 16 will-change: transform; 17 } 18 19 #child { 20 transform: translateZ(15px); 21 height: 100px; width: 100px; margin: 50px; 22 background: yellow; 23 box-shadow: 3px 3px olive; 24 } 25 26 </style> 27 28 <div id="grandparent"> 29 <div id="parent"> 30 <div id="child"> 31 </div> 32 </div> 33 </div>