ttwf-css-3d-polygon-cycle-ref.html (1736B)
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 <meta name="flags" content="svg"> 8 <style type="text/css"> 9 #container { 10 position: absolute; 11 top: 100px; 12 left: 100px; 13 } 14 .rect { 15 position: absolute; 16 } 17 #red0 { 18 background-color: red; 19 left: 6px; 20 width: 100px; 21 height: 50px; 22 } 23 #green0 { 24 background-color: green; 25 top: 6px; 26 width: 50px; 27 height: 100px; 28 } 29 #blue0 { 30 background-color: blue; 31 width: 50px; 32 height: 100px; 33 transform: translate(40px, 81px) rotate(45deg); 34 } 35 #red1 { 36 background-color: red; 37 width: 100px; 38 height: 50px; 39 transform: translate(94px, 0px); 40 } 41 #green1 { 42 background-color: green; 43 width: 50px; 44 height: 100px; 45 transform: translate(0px, 94px); 46 } 47 #blue1 { 48 background-color: blue; 49 width: 50px; 50 height: 100px; 51 transform: translate(102px, 19px) rotate(45deg); 52 } 53 </style> 54 </head> 55 <body> 56 <p>The test passes if there red is over green, green is over blue and blue is over red.</p> 57 <div id="container"> 58 <div class="rect" id="blue0"></div> 59 <div class="rect" id="green0"></div> 60 <div class="rect" id="red0"></div> 61 <div class="rect" id="red1"></div> 62 <div class="rect" id="green1"></div> 63 <div class="rect" id="blue1"></div> 64 </div> 65 </body> 66 </html>