Rotating+Text+Code

This code was displayed by David Han of FACS 1939 on his edmodo class page for students to use and experiment.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   Untitled

 /* <![CDATA[ */

width: 300px; border: 3px solid red;
 * 1) rotated1 {

-moz-transform-origin: 300px 0px; /* move the origin to top-right */ -webkit-transform-origin: 300px 0px; /* move the origin to top-right */

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

font-family:Helvetica, sans-serif;

}

width: 300px; /* box width of 300px */ border: 3px solid blue;
 * 1) rotated2 {

-moz-transform-origin: 0px 0px; /* move the origin to top-left */ -webkit-transform-origin: 0px 0px; /* move the origin to top-left */

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

position:absolute; top: 230px; left: 300px;

font-family:Georgia, serif; font-size:1.2em; background-color: #f0f0f0;

}

width: 300px; border: 3px solid green;
 * 1) rotated3 {

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

position:absolute; top: 425px; left: 280px;

padding: 10px 10px; /* add 10px padding between border & text */ font-family: Trebuchet, Verdana, sans-serif; font-size: .8em;

}

/* ]]> */

Box 1 This is some text inside a rotated div, using its default position (position:static;) in the top left corner of the page. The rotation origin has been moved to (300,0), so that the div pivots around its top right corner.

Box 2 This is some text inside a rotated div, positioned absolutely to the top left corner of the page. The rotation origin has been moved to (0, 0), so that the div pivots around its top left corner.

Box 3 This is some text inside a rotated div, positioned absolutely to the top left corner of the page. The rotation origin has been left at its default settings, so that the div pivots around its middle.