calc-transform-origin-1.html (688B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS Test: Test for calc() on transform-origin</title> 5 <link rel="author" title="L. David Baron" href="https://bugzilla.mozilla.org/show_bug.cgi?id=594934"> 6 <link rel="help" href="http://www.w3.org/TR/css3-values/#calc-notation"> 7 <link rel="match" href="calc-transform-origin-1-ref.html"> 8 <style type="text/css"> 9 10 body { margin: 100px } 11 12 p { 13 height: 50px; width: 200px; 14 background: yellow; 15 transform: rotate(15deg); 16 } 17 18 #one { transform-origin: calc(50px + 50%) calc(100% - 30px); } 19 #two { transform-origin: calc(-12.5% + 3px) calc(-10px - 50%); } 20 21 </style> 22 </head> 23 <body> 24 <p id="one">hello</p> 25 <p id="two">hello</p> 26 </body> 27 </html>