Errores PHP
X
Usuario
Password
0 FPS

Propiedad CSS : transform

13 de Marzo del 2016 por Josep Antoni Bover, 1738 visitas, 0 comentarios, 0 votos.
Categorías : CSS.
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 está 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 : 13/03/2016
Ejemplo modificado por última vez : 30/12/2013

Enlaces relacionados