CSS translate Property
Example
.wrapper {
perspective: 100px;
display: inline-flex;
gap: 1em;
}
.wrapper > div {
width: 7em;
line-height: 7em;
text-align: center;
transition: 0.5s ease-in-out;
border: 3px dotted;
}
#box1:hover {
translate: 20px;
}
#box2:hover {
translate: 20px 20px;
}
#box3:hover {
translate: 5px 5px 30px;
}
Meaning:
The translate CSS property specify translation transforms individually and independently of the transform property.
This maps better to typical user interface usage, and saves having to remember the exact order of transform functions to specify in the transform value.
Default value: | none |
Inherited: | No |
Animatable: | Yes |
Version: | CSS3 |
JavaScript syntax: |
|
Standard Syntax
translate: none|[length|percentage]|initial|inherit|revert|revert-layer|unset;
Browser Support
Status
Property Values
The following table describes the values of this property:
Value | Description |
---|---|
none | Specifies that no translation should be applied. |
[length|percentage] | Specifies value in length or percentage.
Possible values:
|
initial | Sets this property to its default value. |
inherit | If specified, the associated element takes the computed value of its parent element animation-delay property. |
revert | Reverts the cascaded value of the property from its current value to the value the property |
revert-layer | Rollback styles to the ones specified in previous cascade layers. |
unset | Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not. |
Default CSS Property Values
selectors {
translate: none;
}