Element rotation in CSS

Transferred from: Terminal

Let's take a look at this image:

This is a date display, where 2009 is achieved through element rotation.

Here: http://snook.ca/archives/html_and_css/css-text-rotation (Translation: http://bbs.lampbrother.net/thread-13138-1-1.html)

Here is htmlCode:

View Source

Print? 1. <Div> 2. <Span> 31 </Span> 3. <Span> July </Span> 4. <Span> 2009 </Span> 5. </Div>

Rotating CSS:

View Source

print? 1. -WebKit-transform: rotate ( -90 deg ); // safari 4 +, google Chrome 1 + 2. -moz-transform: rotate ( -90 deg ); // firefox 3.5 + 3. filter: progid: DXImageTransform. microsoft. basicimage (rotation = 3 ); // ie

Although it is not part of css3, WebKit already has its own set of deformation attributes, and Mozilla is also following suit. Deformation contains many different types of values, but the most interesting and useful one is that rotation includes any rotation angle.