Flip Transforms
Flip elements horizontally, vertically, or both.
Normal
normal
Flip H
transform_flip_horizontal
Flip V
transform_flip_vertical
Both
transform_flip_both
Rotation Transforms
Rotate elements by fixed angles.
90°
transform_rotate_90
180°
transform_rotate_180
270°
transform_rotate_270
45°
transform_rotate_dynamic
Scale Transforms
Scale elements up or down.
scale_up (1.2x)
scale_down (0.8x)
Translate & Skew Transforms
Move and skew elements.
translate_xy
skew_xy
Interactive Transforms (Hover)
Hover over the elements to see transform effects.
translateX
translateY
scale
rotate
skewX
skewY
3D Transforms (Hover)
Perspective-based 3D transforms.
rotateX
rotateY
rotateZ
Combined Transforms (Hover)
Multiple transforms combined.
scale + rotate
translate + scale
3D rotate + scale
Usage
// Utility Classes (immediate transform)
<div class="transform_flip_horizontal">...</div>
<div class="transform_rotate_90">...</div>
<div class="scale_up">...</div>
<div class="translate_xy">...</div>
// Dynamic rotation with CSS variable
<div class="transform_rotate_dynamic" style="--rotate-angle: 45deg;">...</div>
// SCSS Mixins
.element {
@include transform_flip_horizontal;
}
.rotated {
@include transform_rotate(45deg);
}
.scaled {
@include scale(1.5);
}
// Combined transforms
.card {
@include transform(
translateY(-10px) scale(1.05) rotate(2deg)
);
}