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