English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
La propiedad CSS 'transform' se aplica al2D o3D de transformación. Esta propiedad te permite rotar, escalar, mover, inclinar, desplazar, girar, escalar, etc., un elemento en dos o tres dimensiones.
La siguiente tabla proporciona instrucciones de uso y registro histórico de versiones de esta propiedad, así como su sintaxis de uso en scripts de JavaScript.
| Valor predeterminado: | none |
|---|---|
| Aplícase a: | Elementos transformables |
| Herencia: | No |
| Animable: | es.Por favor, consulte Atributos de animación. |
| Versión: | CSS3nueva característica |
| JavaScript syntax: | object.style.transform="rotate(7deg) |
La sintaxis de esta propiedad es la siguiente:
transform: [ transform-function ] 1 o más valores | none | initial | inherit
El siguiente ejemplo muestra cómo usar la propiedad 'transform'.
img {
-webkit-transform: translate(200px, 50px); /* Chrome, Safari, Opera */
-moz-transform: translate(200px, 50px); /* Firefox */
-ms-transform: translate(200px, 50px); /* IE 9 */
transform: translate(200px, 50px);
}Prueba a ver‹/›La siguiente tabla describe los valores de esta propiedad.
| Valor | Descripción |
|---|---|
| translate(tx,ty) | Mueve el elemento en la cantidad especificada a lo largo de los ejes X e Y. |
| translate3d(tx,ty,tz) | Mueve el elemento en la cantidad especificada a lo largo de los ejes X, Y y Z. |
| translateX(tx) | Mueve el elemento en la cantidad especificada a lo largo del eje X. |
| translateY(ty) | Mueve el elemento en la cantidad especificada a lo largo del eje Y. |
| translateZ(tz) | Mueve el elemento en la cantidad especificada a lo largo del eje Z. |
| rotate(a) | según transform-La propiedad 'origin' define, gira el elemento alrededor de su origen en un ángulo especificado. |
| rotate3d(x,y,z, a) | Girar el elemento en un ángulo especificado alrededor de la dirección vectorial [x, y, z], según el último parámetro especificado.3Elementos en el espacio D. |
| rotateX(a) | Girar el elemento en un ángulo dado alrededor del eje X. |
| rotateY(a) | Girar el elemento en un ángulo dado alrededor del eje Y. |
| rotateZ(a) | Girar el elemento en un ángulo dado alrededor del eje Z. |
| scale(sx,sy) | Escalar el ancho y la altura del elemento hacia arriba o hacia abajo en la cantidad dada. La función scale(1,1)inválido. |
| scale3d(sx,sy,sz) | Escalar el elemento a lo largo de los ejes X, Y y Z en la cantidad dada. La función scale3d(1,1,1)inválido. |
| scaleX(sx) | Escalar el elemento a lo largo del eje X. |
| scaleY(sy) | Escalar el elemento a lo largo del eje Y. |
| scaleZ(sz) | Escalar el elemento a lo largo del eje Z. |
| skew(ax,ay) | Hacer que el elemento se incline en un ángulo dado a lo largo de los ejes X e Y. |
| skewX(ax) | Hacer que el elemento se incline en un ángulo dado a lo largo del eje X. |
| skewY(ay) | Hacer que el elemento se incline en un ángulo dado a lo largo del eje Y. |
| matriz(n,n,n,n,n,n) | Se especifica en la forma de matriz de transformación que contiene seis valores2Transformación D. |
| matriz(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n) | con16de valores4×4Se especifica en la forma de matriz de transformación.3Transformación D. |
| perspective(longitud) | Definición3La perspectiva del elemento de transformación D. Generalmente, a medida que aumenta el valor de esta función, el elemento aparecerá en un lugar más lejano del observador. |
| none | Especificar que no se aplique ninguna transformación. |
| initial | Establecer este atributo en su valor predeterminado. |
| inherit | Si se especifica, el elemento relacionado adopta el valor del atributo transform del elemento padre. |
La compatibilidad del atributo transform de los navegadores, los números en la tabla a continuación representan la versión mínima de los navegadores que admiten esta propiedad; todos los navegadores principales admiten esta propiedad.
|
Consulte la siguiente instrucción:CSS3 2Transformación D,CSS3 3Transformación D
Propiedades relacionadas:backface-visibility,perspective,perspective-origin,transform-origin,transform-style.