transform-compound-001.html (1343B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Test (Transforms): Compound Transforms</title> 5 <link rel="author" title="Keith Schwarz" href="mailto:keith@keithschwarz.com"> 6 <link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org"> 7 <link rel="author" title="Aryeh Gregor" href="mailto:ayg@aryeh.name"> 8 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-rendering"> 9 <meta name="assert" content='Tests that applying multiple transforms to an 10 element is the same as applying the transforms in the same order to nested 11 elements.'> 12 <meta name=fuzzy content="maxDifference=0-30;totalPixels=0-500"> 13 <link rel="match" href="transform-compound-ref.html"> 14 <link rel="mismatch" href="transform-compound-notref-1.html"> 15 <link rel="mismatch" href="transform-compound-notref-2.html"> 16 <style> 17 body { 18 overflow: hidden; 19 } 20 div { 21 transform-origin: top left; 22 } 23 body > div { 24 position: relative; 25 left: 200px; 26 top: 0; 27 } 28 body > div > div { 29 background-color: gold; 30 width: 200px; 31 height: 100px; 32 transform: translate(100px) scale(2) rotate(90deg) skewX(15deg); 33 } 34 </style> 35 </head> 36 <body> 37 <div> 38 <div> 39 </div> 40 </div> 41 </body> 42 </html>