2d-rotate-notref.html (1065B)
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="mismatch" href="2d-rotate-ref.html"> 7 <meta name="flags" content="svg"> 8 <style type="text/css"> 9 article, svg{ 10 position: absolute; 11 top: 220px; 12 left: 60px; 13 } 14 article{ 15 border: 10px solid green; 16 display: block; 17 height: 100px; 18 width: 100px; 19 z-index: 2; 20 cursor:pointer; 21 } 22 section article{ 23 transform: rotate(30deg); 24 transform-origin: 19% 197%; 25 } 26 27 </style> 28 </head> 29 <body> 30 <p>You should only see one block with color green, and you should not see any red</p> 31 <section> 32 <article></article> 33 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300" height="200"> 34 <style type="text/css"> 35 rect{ 36 stroke-width: 10; 37 stroke: red; 38 fill: none; 39 } 40 </style> 41 <rect transform="FAIL_ME(30)" height="110" width="110" y="-38" x="120"/> 42 </svg> 43 </section> 44 </body> 45 </html>