EverWeb Widgets HTML5

Text Rotate Widget

Rotate An HTML Heading

Any Which Way!

Widget Settings

CSS Text Rotate Widget
Text Rotate

Text Rotate

This widget creates an HTML heading which can be rotated to an angle using the CSS transform property.
The font family can be non websafe as there is a control to add a web safe fallback.
The heading type can be specified from h1 - h4 although, when using the HTML5 layout widgets, h1 will suffice in most cases.
The angle of rotation is adjustable through 360º although, in practice, very small angles are used.
To rotate text clockwise, use a low value between 1º and 10º.
Anti clockwise rotation requires a large angle between 350º and 360º.

Widget Settings

The widget settings are quite straight forward as can be seen in the screenshot to the right.
Note the control for adjusting padding next to the one for rotation angle. As the text is rotated, the padding and the boundaries of the widget can be increased to keep the text in view.
This is only required for adjusting the rotated text in relation to other objects on the design canvas in EverWeb. If some of the text disappears it will still be seen when the page is published and viewed in the browser.

Get The Widget