manual de referencia de CSS

CSS @reglas (RULES)

大全 de atributos CSS

CSS3 transform-Atributo style CSS3 Atributo transform

CSS3 transform-Método de uso y ejemplo de 'origin'

transform-El atributo 'origin' permite cambiar la posición del elemento de conversión.

2El elemento de conversión D puede cambiar los ejes X e Y del elemento. 3El elemento de conversión D puede cambiar el eje Z del elemento.　

La tabla a continuación muestra las instrucciones de uso y el historial de versiones de este atributo, así como la sintaxis de uso en scripts de JavaScript.

Valor predeterminado:	50% 50% 0
Aplicable a:	Elementos transformables
Herencia:	sin
Animación posible:	es.Por favor, consulte Atributos de animación.
Versión:	CSS3nueva funcionalidad
Sintaxis de JavaScript:	object.style.transformOrigin="20@%"

transform-La sintaxis de uso de 'origin'

La sintaxis de este atributo es la siguiente:

transform-origin: x-position | y-position | z-position | initial | inherit

Nota:Si solo se especifica 'transform'-El atributo 'origin' especifica un valor, asumiendo que el segundo valor es 'center', que es igual a5el valor del 0%.

El siguiente ejemplo muestra cómo usar transform-propiedad origin.

Ejemplo

img {
　　　　/*　Chrome, Safari, Opera　*/
　　　　-webkit-transform: rotate(30deg);
　　　　-webkit-transform-origin:　25% bottom;
　　　　/*　Firefox　*/
　　　　-moz-transform: rotate(30deg);
　　　　-moz-transform-origin:　25% bottom;
　　　　/*　IE　9　*/
　　　　-ms-transform: rotate(30deg);
　　　　-ms-transform-origin:　25% bottom;
　　　　
　　　　transform: rotate(30deg);
　　　　transform-origin:　25% bottom;
}

Prueba a ver‹/›

Nota:Si al menos un valor de los dos no es un nombre clave, el primer valor representa la posición horizontal del punto de origen de la transformación (o desplazamiento), y el segundo valor representa la posición vertical del punto de origen de la transformación (o desplazamiento).

Valores del atributo

La tabla a continuación describe los valores de esta propiedad.

Valor	Descripción
x-posición	Representa la posición horizontal del punto de origen de la transformación (o desplazamiento). Puede tener uno de los siguientes valores: porcentaje -Define el desplazamiento en relación con la anchura del elemento. longitud -Define el desplazamiento del valor de longitud utilizado. left -igual a 0% o cero anchura. center -igual a la anchura de la caja50% o la mitad. right -igual a100% o toda la anchura de la caja.
y-posición	Representa la posición vertical del punto de origen de la transformación (o desplazamiento). Puede tener uno de los siguientes valores: porcentaje -Define el desplazamiento en relación con la altura del elemento. longitud -Define el desplazamiento del valor de longitud utilizado. top -igual a 0% o cero altura. center -igual a la altura de la caja50% o la mitad. bottom -igual a100% o toda la altura de la caja.
z-posición	unolongitudEl valor, que describe la distancia del punto de origen Z = 0 (para3Transformación D). El porcentaje no es válido.
initial	Establecer este atributo en su valor predeterminado.
inherit	Si se especifica, el elemento asociado utiliza el transform del elemento padre.-Valores del atributo origin.

Compatibilidad del navegador

transform-La compatibilidad del navegador del atributo origin, los números en la tabla a continuación indican la versión mínima del navegador que admite la propiedad; todos los navegadores principales admiten esta propiedad.

	Firefox (2D)3.5 +,3D)10+ ^-moz-,16 + Chrome (2D)4 +,3D)12+ ^-webkit-,36 + Internet Explorer (2D)9 ^-ms-,10+ Apple Safari (2D)3.2 +,3D)4+ ^-webkit- Opera (2D)10.5+ -o 　 ^-, (2D)3D)15+ 　 ^-webkit-,23+

Leer más

Consulte el siguiente tutorial:CSS3 2Transformación D,CSS3 3Transformación D

Propiedades relacionadas:backface-visibility,perspective,perspective-origin,transform,transform-style.

CSS3 transform-Atributo style CSS3 Atributo transform