transform3d-rotatex-perspective-003.html (1344B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): 'perspective' and 'opacity'</title> 5 <link rel="author" title="Matt Woodrow" href="mailto:mwoodrow@mozilla.com"> 6 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#perspective-property"> 8 <meta name="assert" content="This tests for a real-world implementation 9 bug: see <https://bugzilla.mozilla.org/show_bug.cgi?id=707563>. The only 10 difference between the test and reference is 'opacity: 0.9999', which should 11 not affect anything in the test."> 12 <link rel="match" href="transform3d-rotatex-perspective-ref.html"> 13 <link rel="mismatch" href="transform3d-rotatex-perspective-notref.html"> 14 <meta name="fuzzy" content="maxDifference=0-25;totalPixels=0-2080"> 15 16 <style> 17 #container { 18 position: relative; 19 height: 300px; 20 width: 300px; 21 margin: 50px 100px; 22 border: 2px solid blue; 23 24 perspective: 500px; 25 opacity: 0.9999; 26 } 27 #parent { 28 margin: 10px; 29 width: 280px; 30 height: 280px; 31 background-color: #844BCA; 32 33 transform: rotateY(40deg); 34 } 35 </style> 36 </head> 37 <body> 38 <div id="container"> 39 <div id="parent"></div> 40 </div> 41 </body> 42 </html>