The translate() method moves an element from its current position (according to the parameters given for the X-axis and the Y-axis). The following declaration moves the <div> element 50 pixels to the right, and 100 pixels down from its current position:
transform: translate(50px,100px);
| HTML file: | Displayed by browser: |
|---|---|
|
<style>
div { width: 300px; height: 100px; background-color: yellow; border: 1px solid black; -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari */ transform: translate(50px,100px); } </style> <body> <div> The translate(50px,100px) method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position. </div> </body> |
The translate(50px,100px) method moves an element from its current position. This div element is moved 50 pixels to the right, and 100 pixels down from its current position.
|
