0 FPS
Propiedad CSS : transform
La web está en segundo plano, animación en pausa.
Cargando animación...
Propiedad que permite definir una o mas transformaciones en 2d o en 3d.
Sintaxis
transform: valor/es;
| Transformación | Descripción |
|---|---|
| none | Sin transformaciones. (Por defecto) |
| matrix(v,v,v,v,v,v) | Define una transformación 2D utilizando una matríz de 6 valores. |
| matrix3d(v,v,v,v,v,v,v,v,v,v,v,v,v,v,v,v) | Define una trandformación 3D utilizando una matríz de [4x4] valores. |
| perspective(v) | Define la perspectiva 3D para el objeto. Debes especificar el tipo de unidad para el valor (px, cm, pt, etc..). |
| rotate(ángulo) | Define la rotación 2D para el objeto. Debes especificar 'deg' junto al valor. |
| rotate3d(x,y,z,ángulo) | Define la rotación 3D para el objeto. Debes especificar 'deg' para el valor del ángulo. |
| rotateX(ángulo) | Define una rotación 3D a lo largo del eje X. Debes especificar 'deg' junto al valor. |
| rotateY(ángulo) | Define una rotación 3D a lo largo del eje Y. Debes especificar 'deg' junto al valor. |
| rotateZ(ángulo) | Define una rotación 3D a lo largo del eje Z. Debes especificar 'deg' junto al valor. |
| scale(x,y) | Define la escala del objeto 2D. Por defecto los valores son 1.0. |
| scale3d(x,y,z) | Define la escala del objeto 3D. Por defecto los valores son 1.0. |
| scaleX(x) | Define la escala del ancho para el objeto. Por defecto es 1.0. |
| scaleY(y) | Define la escala de la altura para el objeto. Por defecto es 1.0. |
| scaleZ(z) | Define la escala de la profundidad para el objeto. Por defecto es 1.0. |
| skew(ángulo-x,ángulo-y) | Define como torcer el objeto utilizando los ejes X e Y. Debes especificar 'deg' junto a los valores. |
| skewX(ángulo-x) | Define como torcer el objeto utilizando el eje X. Debes especificar 'deg' junto al valor. |
| skewY(ángulo-y) | Define como torcer el objeto utilizando el eje Y. Debes especificar 'deg' junto al valor. |
| translate(x,y) | Permite corregir la posición del objeto en el plano 2D. Debes especificar el tipo de unidad para cada valor (px, cm, pt, etc..). |
| translate3d(x,y,z) | Permite corregir la posición del objeto en el plano 3D. Debes especificar el tipo de unidad para cada valor (px, cm, pt, etc..). |
| translateX(x) | Permite corregir la posición X del objeto. Debes especificar el tipo de unidad para el valor (px, cm, pt, etc..). |
| translateY(y) | Permite corregir la posición Y del objeto. Debes especificar el tipo de unidad para el valor (px, cm, pt, etc..). |
| translateZ(z) | Permite corregir la posición Z del objeto. Debes especificar el tipo de unidad para el valor (px, cm, pt, etc..). |
Todas las funciones 3d requieren una perspectiva en el mismo objeto, o en el contenedor padre. Echa un vistazo al siguiente ejemplo : Transformaciones 3D.
Código de ejemplo
Compatibilidad
Esta propiedad es soportada por todos los navegadores compatibles con CSS3.
Soportado a partir de la versión 12 con el prefijo -webkit- | |
| Soportado a partir de la versión 16 | |
Soportado a partir de la versión 15 con el prefijo -webkit- | |
Soportado a partir de la versión 5 con el prefijo -webkit- | |
| Soportado a partir de la versión 10 |
Documento modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020
Ejemplo modificado por última vez : 30/12/2020