ttwf-transform-translatex-001.html (1094B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transform Using translateX() function</title> 5 <link rel="author" title="Mihai Corlan" href="mailto:mcorlan@adobe.com"> 6 <link rel="help" href="http://www.w3.org/TR/css-transforms-1/#transform-property"> 7 <link rel="match" href="reference/ttwf-reftest-transform-translatex-001.html"> 8 <meta name="assert" content="Test that the green square is moved on X axis 100px"> 9 <style type="text/css"> 10 .greenSquare { 11 position: absolute; 12 top: 100px; 13 left: 0px; 14 width: 100px; 15 height: 100px; 16 transform: translateX(150px); 17 background: green; 18 } 19 .redSquare { 20 position: absolute; 21 top: 100px; 22 left: 150px; 23 width: 98px; 24 height: 98px; 25 background: red; 26 } 27 </style> 28 </head> 29 <body> 30 <p>The test passes if there is a green square and no red.</p> 31 <div> 32 <div class="redSquare"></div> 33 <div class="greenSquare"></div> 34 </div> 35 </body> 36 </html>