CSS Transform Property

Rotation of an element is easy, positioning it where you want after you rotate it is a bit trickier. By default, the rotation axis is right in the middle of the element. This is best demonstrated with an example. Below I have rotated a header. You'll notice a few things right off the bat. First, the space where the header was located before the rotation is still there; is behaves like position:relative; Also, my intent was to place the header on the left and aligned with the top of the paragraph.

Vary the width of your browser window to see the in-line block move around on the page. The first heading, since it was floated left, just sits in the same spot.

float: left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis sem ut ipsum volutpat feugiat a nec nisl. Phasellus tincidunt elit eget mauris tempus tristique vitae id magna. Nulla sit amet tortor nisi, sit amet congue justo. Aenean pretium sodales quam. Aenean pretium pharetra ante, et ullamcorper arcu vehicula vel. Sed sit amet diam nunc. Vestibulum sed ornare orci. Suspendisse eget turpis sed ligula pretium tempor at sit amet lectus. Suspendisse urna purus, pretium malesuada sollicitudin sit amet, semper et dolor. Inline-block, velit ac vulputate gravida, velit velit ultrices elit, eget molestie lorem lacus vitae nunc. Aenean leo nulla, ornare eu mollis et, consequat vitae leo. Sed tristique fringilla varius. Sed laoreet pharetra aliquet. Pellentesque tempus, neque sit amet commodo condimentum, risus neque dignissim enim, vitae fringilla justo purus sed tortor. Curabitur dignissim iaculis pellentesque. In a nunc lorem. Aenean ut neque libero. Pellentesque accumsan lobortis arcu, a commodo risus consectetur id.

To fix the positioning of the header I'll do a position:absolute on it to remove it from the page flow. Keep in mind, its container will need to be position:relative, fixed, or absolute.

The CSS Used Above

.simpleRotation {
	 background-color:#FC0;
	 color:indigo;
	 margin:0;
	 padding:0;
	 -webkit-transform: rotate(270deg);
	 -moz-transform: rotate(270deg);
	 ;
	 -o-transform: rotate(270deg);
	 transform: rotate(270deg);
	 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 }
 .fixPosition {
	 position:absolute;
	 left: 0;
	 top:9em;
	 -webkit-transform-origin:left bottom;
	 -moz-transform-origin:left bottom;
	 -ms-transform-origin:left bottom;
	 -o-transform-origin:left bottom;
	 transform-origin:left bottom;
 }

Standards-compliant code

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
transform: rotate(-90deg);

IE code

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The rotation values of 0, 1, 2, and 3, equate to 0°, 90°, 180°, and 270°.