transform
Applies visual transformations (translate, rotate, scale) to elements. Does not affect layout flow, ideal for animations and fine positioning.
Class List
| Class | CSS | Description |
|---|---|---|
ttx10px | transform: translateX(10px) | Move 10px horizontally |
ttx50p | transform: translateX(50%) | Move 50% horizontally |
neg-ttx50p | transform: translateX(-50%) | Move -50% horizontally |
tty20px | transform: translateY(20px) | Move 20px vertically |
tty50p | transform: translateY(50%) | Move 50% vertically |
neg-tty50p | transform: translateY(-50%) | Move -50% vertically |
tr45deg | transform: rotate(45deg) | Rotate 45° clockwise |
tr90deg | transform: rotate(90deg) | Rotate 90° clockwise |
tr180deg | transform: rotate(180deg) | Rotate 180° (flip) |
ts1-5 | transform: scale(1.5) | Scale to 150% |
ts0-5 | transform: scale(0.5) | Scale to 50% |
ts1-5_2 | transform: scale(1.5, 2) | X 1.5x, Y 2x |
troc | transform-origin: center | Transform origin: center (default) |
trot | transform-origin: top | Transform origin: top |
tsp3d | transform-style: preserve-3d | Preserve child 3D space |
tsf | transform-style: flat | Flatten child rendering |
Pattern Structure
Transform classes: function abbreviation + value + unit.
| Prefix | Function | Unit | Example |
|---|---|---|---|
ttx | translateX() | px, p(%), rem | ttx10px, ttx50p, ttx2rem |
tty | translateY() | px, p(%), rem | tty20px, tty50p, tty3rem |
tr | rotate() | deg | tr45deg, tr90deg, tr180deg |
ts | scale() | 없음 (소수점은 하이픈) | ts1-5, ts0-5, ts2 |
ts{X}_{Y} | scale(X, Y) | 없음 | ts1-5_2, ts2_0-5 |
Negative Values
Adding neg- prefix creates negative value. Example: neg-ttx50p → translateX(-50%)
Visual Comparison
Compares each transform function's effect. Dashed borders indicate original position.
TranslateX — ttx2rem
Moved 2rem right. Original position (dashed) preserved.
TranslateY — tty2rem
Moved 2rem down. No effect on surrounding elements.
Rotate 45deg — tr45deg
Rotated 45° clockwise around center.
Rotate 90deg — tr90deg
90° rotation. Common for icon direction changes.
Scale 1.5 — ts1-5
Scaled to 150%. Original space unchanged.
Scale 0.5 — ts0-5
Scaled to 50%. Appears to have margin but layout is same.
Type Details
ttxttytranslateX / translateY
Moves elements horizontally (X) or vertically (Y). No layout flow impact, ideal for animations with GPU acceleration, better than top/left.
<!-- Horizontal translate -->
<div class="ttx2rem">Move 20px to the right</div>
<!-- Vertical translate -->
<div class="tty3rem">Move 30px down</div>
<!-- Negative value (to the left) -->
<div class="neg-ttx50p">Move 50% to the left</div>
<!-- Absolute center alignment -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
Exact center
</div>Key Classes
ttx10px | transform: translateX(10px) |
ttx50p | transform: translateX(50%) |
ttx2rem | transform: translateX(2rem) |
neg-ttx50p | transform: translateX(-50%) |
neg-ttx10px | transform: translateX(-10px) |
tty10px | transform: translateY(10px) |
tty50p | transform: translateY(50%) |
tty2rem | transform: translateY(2rem) |
neg-tty50p | transform: translateY(-50%) |
neg-tty10px | transform: translateY(-10px) |
trrotate
Rotates clockwise by specified angle. Negative = counter-clockwise. For icon direction changes, arrow animations.
<!-- Icon rotation -->
<svg class="tr90deg">...</svg>
<!-- Arrow direction switch -->
<span class="tr180deg dib">▲</span>
<!-- Rotate on hover -->
<div class="hover-tr180deg tall300msease cp">
Rotates 180 degrees on hover
</div>Key Classes
tr45deg | transform: rotate(45deg) |
tr90deg | transform: rotate(90deg) |
tr180deg | transform: rotate(180deg) |
tr270deg | transform: rotate(270deg) |
tr360deg | transform: rotate(360deg) |
neg-tr90deg | transform: rotate(-90deg) |
tsscale
Scales up or down. 1 = original, 1.5 = 150%, 0.5 = 50%. Use underscore for separate X, Y.
<!-- Scale up 150% -->
<img class="ts1-5" src="..." />
<!-- Scale down 50% -->
<div class="ts0-5">Scaled-down element</div>
<!-- 2x on X-axis only, Y-axis unchanged -->
<div class="ts2_1">Horizontal 2x only</div>
<!-- Slight scale up on hover (card) -->
<div class="hover-ts1-05 tall200msease cp bg18181B p2rem br8px">
Slightly enlarges on hover
</div>Key Classes
ts0-5 | transform: scale(0.5) |
ts0-75 | transform: scale(0.75) |
ts1 | transform: scale(1) |
ts1-1 | transform: scale(1.1) |
ts1-25 | transform: scale(1.25) |
ts1-5 | transform: scale(1.5) |
ts2 | transform: scale(2) |
ts1-5_2 | transform: scale(1.5, 2) |
tro*transform-origin
Sets the pivot point. Default is center. Change for rotation or scaling pivot.
<!-- Top-left origin rotation -->
<div class="tr45deg trotl">Top left is the pivot</div>
<!-- Bottom-right origin scale -->
<div class="ts1-5 trobr">Scale from bottom right</div>
<!-- Default (center) -->
<div class="tr90deg troc">Center origin rotation</div>All Classes
troc | transform-origin: center |
trot | transform-origin: top |
trob | transform-origin: bottom |
trol | transform-origin: left |
tror | transform-origin: right |
trotl | transform-origin: top left |
trotr | transform-origin: top right |
trobl | transform-origin: bottom left |
trobr | transform-origin: bottom right |
tsftsp3dtransform-style
Determines if children render in 3D space. tsp3d is essential for card flips and cube rotations.
<!-- Parent for card flip effect -->
<div class="pr tsp3d">
<div class="pa w100p h100p">Front</div>
<div class="pa w100p h100p tr180deg">Back</div>
</div>tsf | transform-style: flat |
tsp3d | transform-style: preserve-3d |
Hover Combinations
Combine with transition for smooth hover animations.
<!-- Card hover scale -->
<div class="hover-ts1-1 tall200msease cp bg18181B p2rem br8px">
Scale to 1.1x on hover
</div>
<!-- Button hover move up -->
<button class="hover-neg-tty2px tall200msease bg6366F1 cFFFFFF py8px px16px br8px bn cp">
Slightly moves up on hover
</button>
<!-- Icon hover rotation -->
<svg class="hover-tr180deg tall300msease cp">...</svg>| Class Combination | Effect |
|---|---|
hover-ts1-1 tall200msease | Scale 1.1x on hover (cards, images) |
hover-ts1-05 tall200msease | Slight scale on hover (buttons, badges) |
hover-neg-tty2px tall200msease | Move up 2px on hover (floating effect) |
hover-tr180deg tall300msease | Rotate 180° on hover (icon toggle) |
hover-tr90deg tall200msease | Rotate 90° on hover |
Absolute Center Alignment Trick
Combining position: absolute with translate enables precise center alignment.
<!-- Parent element (reference point) -->
<div class="pr h20rem">
<!-- Child element (exact center) -->
<div class="pa t50p l50p neg-ttx50p neg-tty50p">
This element is centered within its parent
</div>
</div>
<!--
How it works:
1. pa: absolute position relative to parent
2. t50p l50p: move top-left corner to 50% of parent
3. neg-ttx50p neg-tty50p: pull back by 50% of own size
Result: element center aligns with parent center
-->Result Preview
Tips & Notes
No Layout Impact
Transform only applies visually. Surrounding positions unchanged. No reflow during animations = good performance.
translate > top/left
For position animation, use ttx/tty instead of top/left. GPU acceleration maintains 60fps easily.
transition required
Transform-only hover effects transition instantly. For smooth animation, use tall200msease.
Check transform-origin
rotate and scale results differ by origin point. Default is center; for corner-based rotation, specify trotl, etc.