Origen de transformación - Trucos CSS

La transform-originpropiedad se usa junto con las transformaciones CSS, lo que le permite cambiar el punto de origen de una transformación.

.box ( transform: rotate(360deg); transform-origin: top left; )

Como se indicó anteriormente, la transform-originpropiedad puede tomar hasta dos palabras clave separadas por espacios o valores de longitud para una transformación 2D y hasta tres valores para una transformación 3D.

Usar el código anterior en un cuadro de 200 px por 200 px, con la transformación aplicada a una transición usando un evento de clic, se comportaría así:

¡Mira este bolígrafo!

Por defecto, el origen de una transformación es “50% 50%”, que está exactamente en el centro de cualquier elemento dado. Cambiar el origen a "arriba a la izquierda" (como en la demostración anterior) hace que el elemento use la esquina superior izquierda del elemento como un punto de rotación.

Los valores pueden ser longitudes, porcentajes o las palabras clave top, left, right, bottom, y center.

El primer valor es la posición horizontal, el segundo valor es la vertical y el tercer valor representa la posición en el eje Z. El tercer valor solo funcionará si está utilizando transformaciones 3D y no puede ser un porcentaje.

Vea la ilustración de origen de transformación de Pen de Shaw (@shshaw) en CodePen.