backface-visibility-hidden-004.html (1075B)
1 <!DOCTYPE html> 2 <title>backface visibility: hidden creates containing block and stacking context when participating in a 3D rendering context</title> 3 <link rel="author" title="Matt Woodrow" href="mailto:mattwoodrow@apple.com"> 4 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 5 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#propdef-backface-visibility"> 6 <link rel="match" href="backface-visibility-hidden-003-ref.html"> 7 8 <p>The test passes if there is a green rectangle and no red.</p> 9 <style> 10 .outer { 11 transform-style: preserve-3d; 12 transform: rotateX(180deg); 13 width: 100px; 14 height: 100px; 15 } 16 17 .card { 18 width: 100px; 19 height: 100px; 20 position: absolute; 21 backface-visibility: hidden; 22 } 23 24 .front { 25 background-color: red; 26 } 27 28 .back { 29 background-color: green; 30 transform: rotateX(180deg); 31 } 32 33 .inner { 34 position: fixed; 35 width: 100px; 36 height: 100px; 37 background-color: red; 38 } 39 40 </style> 41 42 <div class="outer"> 43 <div class="card back"></div> 44 <div class="card front"> 45 <div class="inner"></div> 46 </div> 47 </div>