2d-rotate-001.html (1295B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test: CSS Transform using 2d rotate()</title> 5 <link rel="author" title="Rick Hurst" href="http://mrkn.co/axegs"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="match" href="2d-rotate-ref.html"> 8 <meta name="fuzzy" content="maxDifference=87-159;totalPixels=643-1290"> 9 <meta name="flags" content="svg"> 10 <meta name="assert" content="asserting that you can rotate an element with CSS"> 11 <style type="text/css"> 12 article, svg{ 13 position: absolute; 14 top: 220px; 15 left: 60px; 16 } 17 article{ 18 border: 10px solid green; 19 display: block; 20 height: 100px; 21 width: 100px; 22 z-index: 2; 23 } 24 section article{ 25 transform: rotate(30deg); 26 transform-origin: 19% 197%; 27 } 28 </style> 29 </head> 30 <body> 31 <p>You should only see one block with color green, and you should not see any red</p> 32 <section> 33 <article></article> 34 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> 35 <style type="text/css"> 36 rect{ 37 stroke-width: 10; 38 stroke: red; 39 fill: none; 40 } 41 </style> 42 <rect height="110" width="110" y="-38" x="120" transform="rotate(30)" /> 43 </svg> 44 </section> 45 </body> 46 </html>