Definición de .transform-origin utilizado en CSS
La propiedad .transform-origin se usa junto con las transformaciones CSS, lo que le permite cambiar el punto de origen de una transformación.
Ejemplo de uso de transform-origin
Esta propiedad de CSS se utiliza de esta forma:
.element {
transform: rotate(360deg);
transform-origin: top left;
}Otro ejemplo más avanzado de .transform-origin es el siguiente de CODEPEN:
Sintaxis de .transform-origin en CSS
transform-origin: x-axis y-axis z-axis|initial|inherit;Valores
| El valor de la propiedad | Descripción |
|---|---|
| eje x | Define dónde se coloca la vista en el eje x. Valores posibles:
|
| eje y | Define dónde se coloca la vista en el eje y. Valores posibles:
|
| eje Z | Define dónde se coloca la vista en el eje z (para transformaciones 3D). Valores posibles:
|
| inicial | Establece esta propiedad en su valor predeterminado. |
| heredar | Hereda esta propiedad de su elemento principal. |
Exploradores compatibles con .transform-origin
Los números de la tabla detallan la primera versión del navegador que es plenamente compatible con la propiedad.
Los números seguidos de -webkit- detallan la primera versión que funcionó con un prefijo.
| Property | Chrome | Internet Explorer / Edge | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| transform-style | 36.0 12.0 -webkit- | 11.0 | 16.0 10.0 -moz- | 9.0 4.0 -webkit- | 23.0 15.0 -webkit- |
