# transform

The markup of every demo on <https://kuiper.oeds.it/transform/>, extracted from that
page. It is generated, so it cannot disagree with what the page renders.

Load the framework from the origin and read <https://kuiper.oeds.it/docs/KUIPER.md> first:
a Kuiper class carries no prefix and a UIkit behavior attribute carries `data-`.

## center

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-2@l width-1-3@xl"><div class="card"><div class="position-relative height-s background-white-dark"><div class="position-top-left transform-center background-muted padding-4xs">transform-center</div></div></div></div>
</div>
```

## origin

Varies: 8 specimens.

```html
<div data-grid class="grid-xs">
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-top-left background-muted text-center"><p>top-left</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-top-center background-muted text-center"><p>top-center</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-top-right background-muted text-center"><p>top-right</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-center-left background-muted text-center"><p>center-left</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-center-right background-muted text-center"><p>center-right</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-bottom-left background-muted text-center"><p>bottom-left</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-bottom-center background-muted text-center"><p>bottom-center</p></div></div></div></div>
 <div class="width-1-1 width-1-1@s width-1-2@m width-1-3@l width-1-4@xl"><div class="card animation-toggle"><div class="height-s background-white-dark"><div class="height-1-1 animation-scale-up transform-origin-bottom-right background-muted text-center"><p>bottom-right</p></div></div></div></div>
</div>
```