Transform Utilities
NuvoUI provides a comprehensive set of transform utilities to control how elements are positioned, scaled, rotated, and skewed on the page. These utilities make it easy to create dynamic layouts and animations.
Configuration
The transform utilities are built on a set of configurable variables and maps:
Parent Selector
All transform utilities are scoped under the VAR.$parent-selector which can be configured to change the global selector context:
Utility Class Generation
Transform utility classes are only generated if VAR.$generate-utility-classes is set to true:
Translation Values
Translation utilities are generated from the following value maps:
Scale Values
Scale utilities are generated from the following value map:
Rotation Values
Rotation utilities are generated from the following value maps:
Transform Origin Values
Transform origin utilities are generated from the following value map:
Breakpoints
Responsive variants of transform utilities are generated based on the breakpoint values defined in the VAR.$breakpoints map:
Translation Utilities
Move elements horizontally (X-axis) and vertically (Y-axis):
Percentage-Based Translation
Move elements by a percentage of their own size:
Negative Translation
Move elements in the opposite direction:
Scale Utilities
Resize elements proportionally:
Scale X and Y Independently
Scale elements horizontally or vertically:
Rotation Utilities
Rotate elements clockwise:
Rotation will only work if the element is block or inline-block
Negative Rotation
Rotate elements counter-clockwise:
Transform Origin
Control the point around which transformations occur:
Hover Transformations
Apply transformations on hover:
Group Hover Transformations
Apply transformations when a parent element is hovered:
Responsive Transforms
Apply different transforms at different screen sizes:
Common UI Patterns
Card Hover Effects
Create interactive card hover effects:
Button Hover Effects
Add subtle hover effects to buttons:
Icon Animations
Animate icons with transforms:
Image Zoom
Zoom images on hover:
Transform Utilities Reference Table
Translation Classes
| Class | CSS Output | Description |
|---|---|---|
.translate-x-{size} | --translate-x: {size}; transform: ... | Moves element horizontally |
.translate-y-{size} | --translate-y: {size}; transform: ... | Moves element vertically |
.-translate-x-{size} | --translate-x: -{size}; transform: ... | Moves element horizontally in opposite direction |
.-translate-y-{size} | --translate-y: -{size}; transform: ... | Moves element vertically in opposite direction |
Where {size} can be any of the following:
0,1,2,3,4,5,6,8,10,12,16,20(rem-based values)25p,33p,50p,66p,75p,100p(percentage-based values)
Scale Classes
| Class | CSS Output | Description |
|---|---|---|
.scale-{factor} | --scale-x: {factor}; --scale-y: {factor}; transform: ... | Scales element in both directions |
.scale-x-{factor} | --scale-x: {factor}; transform: ... | Scales element horizontally |
.scale-y-{factor} | --scale-y: {factor}; transform: ... | Scales element vertically |
Where {factor} can be any of the following:
0,50,75,90,95,100,105,110,125,150
Rotation Classes
| Class | CSS Output | Description |
|---|---|---|
.rotate-{angle} | --rotate: {angle}deg; transform: ... | Rotates element clockwise |
.-rotate-{angle} | --rotate: -{angle}deg; transform: ... | Rotates element counter-clockwise |
Where {angle} can be any of the following:
0,45,90,180,270
Transform Origin Classes
| Class | CSS Output | Description |
|---|---|---|
.origin-{position} | transform-origin: {position} | Sets the reference point for transformations |
Where {position} can be any of the following:
center,top,top-right,right,bottom-right,bottom,bottom-left,left,top-left
Interactive Classes
Add hover: or group-hover: prefix to any transform class to apply it on hover:
.hover:translate-y-2.hover:scale-110.hover:rotate-45.group-hover:translate-y-2.group-hover:scale-110.group-hover:rotate-45
Responsive Classes
Add @{breakpoint} suffix to any transform class to apply it at a specific breakpoint:
.translate-y-4@md.scale-110@lg.rotate-45@xl
SCSS Mixins
NuvoUI provides a comprehensive set of transform mixins for use in your SCSS:
Translation Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include translate-x($value) | Moves element horizontally | $value: Any valid CSS length or percentage |
@include translate-y($value) | Moves element vertically | $value: Any valid CSS length or percentage |
@include translate-z($value) | Moves element along Z-axis (3D) | $value: Any valid CSS length |
@include translate($x, $y: null) | Moves element horizontally and optionally vertically | $x: X translation, $y: Y translation (optional) |
Scale Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include scale($value) | Scales element uniformly | $value: Scale factor (1 = 100%) |
@include scale-x($value) | Scales element horizontally | $value: Scale factor (1 = 100%) |
@include scale-y($value) | Scales element vertically | $value: Scale factor (1 = 100%) |
Rotation Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include rotate($value) | Rotates element | $value: Angle in degrees (e.g., 45deg) |
Skew Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include skew-x($value) | Skews element horizontally | $value: Angle in degrees (e.g., 15deg) |
@include skew-y($value) | Skews element vertically | $value: Angle in degrees (e.g., 15deg) |
Transform Origin Mixin
| Mixin | Description | Parameters |
|---|---|---|
@include origin($value) | Sets transform origin | $value: Any valid transform-origin value |
Common Transform Mixin
| Mixin | Description | Parameters |
|---|---|---|
@include apply-transform | Applies all transform properties at once | None |