Transform Rotate
Rotate element
Syntax
visual="rotate:[degrees]"Values
| Value | CSS Output | Description |
|---|---|---|
0 | transform: rotate(0deg) | No rotation |
45 | transform: rotate(45deg) | 45° rotation |
90 | transform: rotate(90deg) | 90° rotation |
180 | transform: rotate(180deg) | 180° rotation |
Examples
html
<div visual="rotate:45">Rotated 45 degrees</div>Preview
Rotate Transform
visual="rotate:45" - Rotate elements by degrees
0°
45°
90°
View Code
html
<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
<div space="p:small" visual="bg:primary text:white rounded:small rotate:0">0°</div>
<div space="p:small" visual="bg:primary text:white rounded:small rotate:45">45°</div>
<div space="p:small" visual="bg:primary text:white rounded:small rotate:90">90°</div>
</div>Arbitrary Values
Supports custom values using bracket syntax:
html
<div visual="transform:[custom-value]">Custom</div>