transform-origin
Sets the pivot point for transform operations. Default is center.
Class List
| Class | CSS | Description |
|---|---|---|
troc | transform-origin: center | Center origin (default) |
trot | transform-origin: top | Top center origin |
trob | transform-origin: bottom | Bottom center origin |
trol | transform-origin: left | Left center origin |
tror | transform-origin: right | Right center origin |
trotl | transform-origin: top left | Top-left origin |
trotr | transform-origin: top right | Top-right origin |
trobl | transform-origin: bottom left | Bottom-left origin |
trobr | transform-origin: bottom right | Bottom-right origin |
Visual Comparison
Compares how results differ by origin point for the same 45° rotation.
center — troc
top — trot
bottom — trob
top left — trotl
top right — trotr
bottom left — trobl
Usage Examples
<!-- Center rotation (default) -->
<div class="troc tr45deg">Rotate</div>
<!-- Top-left origin rotation -->
<div class="trotl tr45deg">Rotated from top-left</div>
<!-- Dropdown: scale from top origin -->
<div class="trot ts1 tall200msease hover-ts1-1">
Scale from top origin
</div>
<!-- Top-left menu expand effect -->
<ul class="trotl ts0 hover-ts1 tall300msease">
<li>Menu 1</li>
<li>Menu 2</li>
</ul>Tips & Notes
Default is center
troc is default, no separate specification needed for center rotation. Only use when changing origin.
Dropdown/Menu Animation
trot (top) creates top-to-bottom dropdown, trotl (top left) creates top-left expanding menu.