---
title: CSS3 2d Transforms
---
## CSS3 2d Transforms
CSS3 transforms allow you to translate, rotate, scale, and skew elements.
A transformation is an effect that lets an element change shape, size and
position.
CSS3 supports 2D and 3D transformations.
## Browser Support for 2D Transforms
The numbers in the table specify the first browser version that fully supports
the property.
Numbers followed by -ms-, -webkit-, -moz-, or -o- specify the first version that
worked with a prefix.
| Property | Chrome | IE | Firefox | Safari | Opera |
| --------------------------------------- | ---------------------- | ------------------ | ------------------- | -------------------- | -------------------------------------------- |
| transform | 36.0 4.0
-webkit- | 10.0 9.0
-ms- | 16.0 3.5
-moz- | 9.0 3.2 -webkit- | 23.0 15.0
-webkit-
12.1 10.5 -o- |
| transform-origin
(two-value-syntax) | 36.0 4.0
-webkit- | 10.0 9.0
-ms- | 16.0 3.5
-moz- | 9.0 3.2
-webkit- | 23.0 15.0
-webkit-
12.1
10.5 -o- |
## CSS3 2D Transforms
Methods:
* `translate()`
* `rotate()`
* `scale()`
* `skewX()`
* `skewY()`
* `matrix()`
## The translate() Method
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 example moves the `