A Couple of Useful CSS Transforms

Using Rotation to Create Vertical Headers
You can use rotate(-90deg) (or DXImageTransform.Microsoft.BasicImage(rotation=3) for IE) to rotate a element to make it vertical.
Sideways Headers
Text Rotation
Note: for browser support for transforms please see CSS3 Transforms. For information on applying transforms to inline elements see the Stack Overflow question CSS transform doesn’t work on inline elements.

Using Transitions and Translations to Create an Off-Canvas Menu
CSS transforms and transitions (transform: translateX(350px); transition: transform 500ms ease;) give a much smoother experience than jQuery animations for a flyout menu.
Implementing Off-Canvas Navigation For A Responsive Website
Off Canvas Menus with CSS3 Transitions and Transforms
Note: for browser support for transitions see CSS3 transitions. Remember to use the appropriate vendor prefixes in the transitions (CSS3 transforms and transitions (Webkit)).

About Jennifer Phillips Campbell

Software Developer and Medieval Historian
This entry was posted in Web Design. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s