CSS translate

Previous Next

Demo of the different values of the translate property.

Click the property values below to see the result:

translate: 0 0 0;
translate: 50px 0;
translate: 0 50px;
translate: 0 0 50px;
translate: -50px 20px 0;
translate: 20px 20px -150px;
DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

DIV1
DIV2


Perspective property for DIV1 is set to 200px. For changes in z-axis to take effect, perspective property must be set on parent element of the element you want to move.

Play more with the code in our Tryit yourself editor: Try it Yourself ❯