CSS properties - translate

revision:

translate property

- allows you to change the position of elements. The translate property defines x- and y-coordinates of an element in 2D. You can also define the z-coordinate to change position in 3D.

Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y- and z-coordinates.

Tip: You need to define a value for CSS perspective property for the z-property to take effect.

Note: an alternative technique to translate an element is to use CSS "transform property" with CSS "translate() function". The CSS translate property is arguably a simpler and more direct way to translate an element.

CSS syntax : translate: x-axis y-axis z-axis | initial | inherit;

Property values:

x-axis : defines position at the x-axis. Possible values: length, %

y-axis : defines position at the y-axis. Possible values: length, %

z-axis : defines position at the z-axis. Possible values: length.

initial : sets this property to its default value.

inherit : inherits this property from its parent element.

JavaScript syntax: object.style.translate="1vw 1w"

example: translate property

Moves red box 10vw right, and 2vw up.

Try to change y-value to 3vw and see what happens.

code: 
                    <div>
                        <div id="TRA-A"></div>
                        <p>Moves red box 10vw right, and 2vw up.</p>
                        <p>Try to change y-value to 3vw and see what happens.</p>
                    </div>
                    <style>
                        div#TRA-A {height: 9vw; width: 4vw; background-color: red; translate: 10vw -2vw;}
                    </style>