Atributo transform-origin de CSS

Recomendaciones de cursos:

Definición y uso

La propiedad transform-origin permite cambiar la posición del elemento que se convierte.

Los elementos de conversión 2D pueden cambiar el eje x e y del elemento. Los elementos de conversión 3D pueden cambiar su eje Z.Demostración.

Para entender mejor la propiedad transform-origin, consulte estaDemostración.

Usuarios de Safari/Chrome: Para entender mejor el uso de la propiedad transform-origin en la transformación 3D, consulte estaNota: transform propiedad debe usarse junto con.

Para entender mejor la propiedad transform, consulte estaDemostración.

Véase también:

Tutoriales de CSS3:Transformación 2D de CSS3

Tutoriales de CSS3:Transformación 3D de CSS3

Manual de Referencia del DOM HTML:propiedad transformOrigin

ejemplo

Establecer la posición de punto de partida del elemento girado:

div {
  transform: rotate(45deg);
  transform-origin: 20% 40%;
}

Prueba tu mismo

Hay más ejemplos en la parte inferior de la página.

sintaxis de CSS

transform-origin: eje X eje Y eje Z;

valor de la propiedad

valor descripción
eje X

Define dónde se coloca la vista en el eje X. Valores posibles:

  • izquierda
  • centro
  • derecha
  • longitud
  • %
eje Y

Define dónde se coloca la vista en el eje Y. Valores posibles:

  • arriba
  • centro
  • abajo
  • longitud
  • %
eje Z

Define dónde se coloca la vista en el eje Z. Valores posibles:

  • longitud

Detalles técnicos

Valor por defecto: 50% 50% 0
Herencia: no
Versión: CSS3
Sintaxis de JavaScript: objeto.style.transformOrigin="20% 40%"

Compatibilidad del navegador

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad.

Los números en la tabla indican la primera versión del navegador que admite completamente la propiedad con prefijo -webkit-, -moz- o -ms-.

propiedad Chrome IE Firefox Safari Opera
transform-origin
(gramática de dos valores)		 36.0
4.0 -webkit-		 10.0
9.0 -ms-		 16.0
3.5 -moz-		 9.0
3.2 -webkit-		 23.0
15.0 -webkit-
10.5 -o-
transform-origin
(gramática de tres valores)		 36.0
12.0 -webkit-		 10.0 16.0
10.0 -moz-		 9.0
4.0 -webkit-		 23.0
15.0 -webkit-