transforms-rotate-degree-45.html (1751B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with rotate function and one parameter</title> 5 <link rel="author" title="Ji Kai" href="mailto:7jikai@gmail.com"> 6 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#transform-property"> 7 <link rel="help" href="https://drafts.csswg.org/css-transforms-1/#two-d-transform-functions"> 8 <link rel="match" href="reference/transforms-rotate-degree-45-ref.html"> 9 <meta name="fuzzy" content="maxDifference=0-19;totalPixels=0-564"> 10 <meta name="assert" content="If the rotate and scale with parameter not provided, greenSquare will not cover redSquare."> 11 <style type="text/css"> 12 .greenSquare { 13 position: absolute; 14 top: 100px; 15 left: 100px; 16 width: 100px; 17 height: 100px; 18 background: green; 19 transform: rotate(45deg); 20 } 21 22 .redSquare-up { 23 position: absolute; 24 top: 80px; 25 left: 80px; 26 width: 0; 27 height: 0; 28 border-left: 70px solid transparent; 29 border-right: 70px solid transparent; 30 border-bottom: 70px solid red; 31 } 32 33 .redSquare-down { 34 position: absolute; 35 top: 150px; 36 left: 80px; 37 width: 0; 38 height: 0; 39 border-left: 70px solid transparent; 40 border-right: 70px solid transparent; 41 border-top: 70px solid red; 42 } 43 </style> 44 </head> 45 <body> 46 <p>The test passes if there is a green square and no red.</p> 47 <div class="redSquare-up"></div> 48 <div class="redSquare-down"></div> 49 <div class="greenSquare"></div> 50 </body> 51 </html>