transform-origin
En esta página
| Clase | Propiedades CSS |
|---|---|
origin-center |
transform-origin: center; |
origin-top |
transform-origin: top; |
origin-top-right |
transform-origin: top right; |
origin-right |
transform-origin: right; |
origin-bottom-right |
transform-origin: bottom right; |
origin-bottom |
transform-origin: bottom; |
origin-bottom-left |
transform-origin: bottom left; |
origin-left |
transform-origin: left; |
origin-top-left |
transform-origin: top left; |
origin-(<custom-property>) |
transform-origin: var(<custom-property>); |
origin-[<value>] |
transform-origin: <value>; |
Examples#
Basic example#
Use utilities like origin-top and origin-bottom-left to set an element's transform origin:
{
origin-center
origin-top-left
origin-bottom
<!-- [!code classes:origin-center,origin-top-left,origin-bottom] -->
<img class="origin-center rotate-45 ..." src="/img/mountains.jpg" />
<img class="origin-top-left rotate-12 ..." src="/img/mountains.jpg" />
<img class="origin-bottom -rotate-12 ..." src="/img/mountains.jpg" />