CSS3 provides two new style properties: transform and transform-origin that you can use to rotate text so that it is positioned vertically on the page, rather than horizontally.

For example, to change an H1 headline to vertical text, you could write:

h1 {
  -webkit-transform:rotate(90deg);
  -moz-transform:rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transform-origin: 0% 100%;
  -moz-transform-origin: 0% 100%;
  -o-transform-origin: 0% 100%;
  transform-origin: 0% 100%;
  white-space: nowrap;
} 

Note that there is also the white-space CSS property. This keeps the headline all on one line.

Posted in: CSS

Related FAQ's

Marius Ion ANGEL HOT SOFT LLC (800) 316-7677