translate() CSS Function
Description
The translate() CSS function shifts the element relative to the original location by a given value horizontally and vertically.
Syntax
transform: translate( tx [, ty ]? ); /* the question mark indicates the second value is optional */
Values
- txHorizontal shift. A positive value shifts to the right, a negative value to the left.
- tyVertical shift. A positive value moves up, a negative value down. If the value is not specified, then the default value is 0 and no vertical shift occurs.
Example
<img class="translate" src="images/nature.jpg" alt="Nature Image">.translate {
transform: translate(50px, 30px);
}Browser Support
| Desktop | |||||
 |
 |
 |
 |
 |
 |
| ? | ? | ? | ? | ? | ? |
| Tablets / Mobile | |||||
 |
|
|
|
|
 |
| ? | ? | ? | ? | ? | ? |
Last updated by CSSPortal on: 1st December 2019
CSS Functions
- attr()
- blur()
- brightness()
- calc()
- circle()
- contrast()
- drop-shadow()
- ellipse()
- grayscale()
- hsl()
- hsla()
- hue-rotate()
- inset()
- invert()
- linear-gradient()
- matrix()
- matrix3d()
- opacity()
- perspective()
- polygon()
- radial-gradient()
- repeating-linear-gradient()
- repeating-radial-gradient()
- rgb()
- rgba()
- rotate()
- rotate3d()
- rotateX()
- rotateY()
- rotateZ()
- saturate()
- scale()
- scale3d()
- scaleX()
- scaleY()
- scaleZ()
- sepia()
- skew()
- skewX()
- skewY()
- translate()
- translate3d()
- translateX()
- translateY()
- translateZ()