Propiedad transform-origin
La propiedad transform-origin establece el punto,
en relación al cual ocurrirán las transformaciones
del elemento, definidas por la propiedad transform.
Por defecto, este punto es el centro del elemento,
y, por ejemplo, la rotación ocurrirá en relación a
su centro. Sin embargo, este comportamiento se puede cambiar
y hacer que el elemento gire en relación a
su lado, esquina o incluso en relación a un
punto que se encuentra fuera del elemento.
Sintaxis
selector {
transform-origin: eje-X eje-Y eje-Z;
}
Los valores para los ejes Y y Z no son obligatorios, se pueden omitir (tomarán sus valores por defecto). El desplazamiento del punto en el eje Z es necesario para transformaciones 3D.
Valores para el eje X
| Valor | Descripción |
|---|---|
| Unidades CSS | El valor puede ser cualquier unidad para tamaños, que establece el desplazamiento del centro de transformación desde el borde izquierdo del elemento. Un valor positivo desplaza el centro de transformación a la derecha (hacia el interior del elemento), y uno negativo - a la izquierda (hacia el exterior del elemento) en relación al borde izquierdo del elemento. |
left |
Punto de rotación horizontal en el borde izquierdo del elemento. |
right |
Punto de rotación horizontal en el borde derecho del elemento. |
center |
Punto de rotación horizontal en el centro del elemento. |
Valor por defecto: center.
Valores para el eje Y
| Valor | Descripción |
|---|---|
| Unidades CSS | El valor puede ser cualquier unidad para tamaños, que establece el desplazamiento del centro de transformación desde el borde superior del elemento. Un valor positivo desplaza el centro de transformación hacia abajo (hacia el interior del elemento), y uno negativo - hacia arriba (hacia el exterior del elemento) en relación al borde superior del elemento. |
top |
Punto de rotación vertical en el borde superior del elemento. |
bottom |
Punto de rotación vertical en el borde inferior del elemento. |
center |
Punto de rotación vertical en el centro del elemento. |
Valor por defecto: center.
Valores para el eje Z
| Valor | Descripción |
|---|---|
| Unidades CSS | El valor puede ser cualquier unidad para tamaños, que establece el desplazamiento del centro de transformación desde el plano del elemento. Un valor positivo lo desplaza hacia nosotros (desde el plano de la pantalla), y uno negativo, alejándolo de nosotros. |
Valor por defecto: 0px.
Ejemplo
Actualmente el valor de la propiedad transform-origin no está establecido y el bloque girará en relación a su centro. Pasa el cursor del ratón sobre el bloque para ver el efecto:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: center center;
transform: rotate(30deg);
}
:
Ejemplo
Y ahora, al pasar el cursor, el bloque girará en relación al vértice superior izquierdo:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 0px 0px;
transform: rotate(30deg);
}
:
Ejemplo
Y ahora, al pasar el cursor, el bloque girará en relación al
vértice inferior derecho. Para ello, hay que colocar
el punto de transformación a 100% a la derecha
y a 100% hacia abajo (se podría especificar
en px, pero si cambian las dimensiones del elemento
el punto de transformación se quedaría en el mismo lugar,
por lo que es mejor hacerlo en %):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 100%;
transform: rotate(30deg);
}
:
Ejemplo
Giremos el bloque en relación al vértice superior derecho:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: 100% 0%;
transform: rotate(30deg);
}
:
Ejemplo
Giremos el bloque en relación al centro del lado izquierdo.
Para ello, para el eje X establecemos left (el punto
de rotación estará a la izquierda), y para el eje Y - center
(el punto de rotación estará en el centro verticalmente):
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left center;
transform: rotate(30deg);
}
:
Ejemplo
La propiedad se puede establecer no solo para la rotación,
sino también para otras transformaciones. Aumentemos
la escala con scale, indicando el punto
de transformación como la esquina inferior izquierda:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: left bottom;
transform: scale(1.5);
}
:
Ejemplo
Y ahora indiquemos como punto de transformación la esquina superior derecha:
<div id="elem">lorem ipsum</div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform-origin: right top;
transform: scale(1.5);
}
:
Ejemplo
El punto de transformación también se puede establecer fuera del elemento. En el siguiente ejemplo, al pasar el cursor sobre el bloque rojo, el bloque negro realizará una rotación en relación a un punto que se encuentra en el exterior:
<div id="hover"></div>
<div id="elem"></div>
#hover {
border: 1px solid red;
width: 50px;
height: 50px;
}
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
transition: transform 1s;
transform-origin: -100px -100px;
}
#hover:hover + #elem {
transform: rotate(30deg);
}
:
