CSS3 transformPropiedad
Ejemplo
Rota el elemento div:
div
{
transform:rotate(7deg);
-ms-transform:rotate(7deg); /* IE 9 */
-webkit-transform:rotate(7deg); /* Safari and Chrome */
}
Pruébalo »
Soporte del navegador
Los números en la tabla indican la primera versión del navegador que admite la propiedad.
El número que precede a -webkit-, -ms- o -moz- indica la primera versión del navegador que admite la propiedad con ese prefijo.
| Propiedad | |||||
|---|---|---|---|---|---|
| transform (2D) | 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- 10.5 -o- |
| transform (3D) | 36.0 12.0 -webkit- |
12.0 | 10.0 | 16.0 10.0 -moz- |
9.0 4.0 -webkit- |
Definición de la propiedad e instrucciones de uso
La propiedad Transform se aplica a la transformación 2D o 3D de un elemento. Esta propiedad te permite rotar, escalar, mover, inclinar, etc., los elementos.
Para comprender mejor la propiedad Transform, consulta.
| Valor por defecto: | none |
|---|---|
| Herencia: | no |
| Versión: | CSS3 |
| Sintaxis de JavaScript: | object.style.transform="rotate(7deg)" |
Sintaxis
transform: none|transform-functions;
| Valor | Descripción |
|---|---|
| none | Define que no se realiza ninguna transformación. |
| matrix(n,n,n,n,n,n) | Define una transformación 2D, mediante una matriz de seis valores. |
| matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | Define una transformación 3D, mediante una matriz 4x4 de 16 valores. |
| translate(x,y) | Define una transformación 2D. |
| translate3d(x,y,z) | Define una transformación 3D. |
| translateX(x) | Define una transformación, solo usando el valor del eje X. |
| translateY(y) | Define una transformación, solo usando el valor del eje Y. |
| translateZ(z) | Define una transformación 3D, solo usando el valor del eje Z. |
| scale(x[,y]?) | Define una transformación de escala 2D. |
| scale3d(x,y,z) | Define una transformación de escala 3D. |
| scaleX(x) | Define una transformación de escala estableciendo el valor del eje X. |
| scaleY(y) | Define una transformación de escala estableciendo el valor del eje Y. |
| scaleZ(z) | Define una transformación de escala 3D estableciendo el valor del eje Z. |
| rotate(angle) | Define una rotación 2D, especificando el ángulo en el parámetro. |
| rotate3d(x,y,z,angle) | Define una rotación 3D. |
| rotateX(angle) | Define una rotación 3D a lo largo del eje X. |
| rotateY(angle) | Define una rotación 3D a lo largo del eje Y. |
| rotateZ(angle) | Define una rotación 3D a lo largo del eje Z. |
| skew(x-angle,y-angle) | Define una transformación de inclinación 2D a lo largo de los ejes X e Y. |
| skewX(angle) | Define una transformación de inclinación 2D a lo largo del eje X. |
| skewY(angle) | Define una transformación de inclinación 2D a lo largo del eje Y. |
| perspective(n) | Define una vista en perspectiva para elementos con transformación 3D. |
Más ejemplos
Este ejemplo demuestra cómo crear fotos "polaroid" y rotar imágenes.
Css3 Transform: diversas transformaciones y rotaciones
Otras extensiones