Illustration Rotate
A group of class names to rotate and flip an SVG illustration.
Usage
Add the modifier class to any SVG illustration.
Accessible attributes
| Accessible attribute | Description |
|---|---|
aria-hidden="true" |
When an illustration is used for only decorative purposes add this attribute to the icon's tag. |
Modifier selectors
| Modifier selector | Description |
|---|---|
slb-icon--rotate-90 |
Rotate 90 degrees clockwise. |
slb-icon--rotate-180 |
Rotate 180 degrees clockwise. |
slb-icon--rotate-270 |
Rotate 270 degrees clockwise. |
slb-icon--flip |
Mirror icon vertically and horizontally |
slb-icon--flip-horizontal |
Mirror icon horizontally. |
slb-icon--flip-vertical |
Mirror icon vertically. |
.slb-illustration - Default illustration.
.slb-icon--rotate-90 - Rotate 90 degrees clockwise.
.slb-icon--rotate-180 - Rotate 180 degrees clockwise.
.slb-icon--rotate-270 - Rotate 270 degrees clockwise.
.slb-icon--flip - Mirror illustration vertically and horizontally.
.slb-icon--flip-horizontal - Mirror illustration horizontally.
.slb-icon--flip-vertical - Mirror illustration vertically.