ttwf-css-3d-polygon-cycle.html (1590B)
1 <!DOCTYPE html> 2 <html> 3 <!-- Submitted from TestTWF Paris --> 4 <head> 5 <title>CSS Transforms Test: 3d transform polygon cycle</title> 6 <link rel="author" title="Leo Ziegler" href="mailto:leo.ziegler@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-transforms-2/#3d-transform-rendering"> 8 <!-- See also: http://http://en.wikipedia.org/wiki/Newell's_algorithm --> 9 <link rel="match" href="reference/ttwf-css-3d-polygon-cycle-ref.html"> 10 <meta name="fuzzy" content="maxDifference=0-113;totalPixels=0-674"> 11 <meta name="flags" content="svg"> 12 <meta name="assert" 13 content="The red, green and blue rectangles are forming a cycle, which should be detected and rendered using Newell Algorithm's."> 14 <style type="text/css"> 15 #container { 16 position: absolute; 17 top: 100px; 18 left: 100px; 19 transform-style: preserve-3d; 20 } 21 .rect { 22 position: absolute; 23 } 24 #red { 25 background-color: red; 26 width: 200px; 27 height: 50px; 28 transform: rotateY(20deg); 29 } 30 #green { 31 background-color: green; 32 width: 50px; 33 height: 200px; 34 transform: rotateX(20deg); 35 } 36 #blue { 37 background-color: blue; 38 width: 50px; 39 height: 200px; 40 transform: rotate(45deg) translate(50px, -50px) rotateX(-20deg); 41 } 42 </style> 43 </head> 44 <body> 45 <p>The test passes if there red is over green, green is over blue and blue is over red.</p> 46 <div id="container"> 47 <div class="rect" id="red"></div> 48 <div class="rect" id="green"></div> 49 <div class="rect" id="blue"></div> 50 </div> 51 </body> 52 </html>