With a piece of paper with writing on it, there are four ways of looking at it, four symmetry patterns or transformations.
The first transformation is null, or zero: the paper just as it is normally (or imagine writing on a glass-panelled door, like the entrance to a shop, say, as viewed from the outside by a potential shopper). Horizontal change (along the x axis) is 0, and along the vertical (y) axis it is also 0, so it can be represented as (0, 0).
The second transformation is looking in a mirror: flipping the paper over, in the left-right direction (or looking at the writing on a glass door, from inside the shop). The top and bottom edges stay the same as they are, and the left and right edges swap over, and the writing becomes back-to-front. We’ve flipped the paper over horizontally, rotating it about its y-axis. This horizontal transformation can be represented in (x, y) terms as (180, 0).
Another transformation is turning the page upside-down: top and bottom edges swap over, and left and right stay left and right. If we start with our (0, 0)-oriented piece of paper, flipping it vertically (rotating about the x-axis) gives us a (0, 180) transformation. And if we start from the mirrored transform (180, 0), flipping it over vertically gives us a (180, 180) transform: both back-to-front and upside-down.
Although, it depends on whether or not you turn your head, as well.
In Microsoft Word, text boxes can be rotated along the x- and y-axes, as above.
Keeping the paper flat on the desk, and rotating it around, spinning it around, gives different effects.
The CSS code is:
>span style="vertical-text: -ms-transform: rotate(90deg); -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); -ms-transform-origin: left top 0; -moz-transform-origin: left top 0; -webkit-transform-origin: left top 0; transform-origin: left top 0; background: #E23737; color: #fff; margin-left: 40px; padding: 10px; border: 1px solid #B52C2C; text-transform: 1px 1px 0px rgba(0, 0, 0, 0.5); box-shadow: 2px -2px 0px rgba(0, 0, 0, 0.1); float: left;">Sample vertical text>/span>
That’s the 90-degree rotation.
For completeness, here is the 180-degree:
And the 270-degree version:
Similar effect with the CSS transform element, set to rotateY(0deg) rotateX(0deg), and so on:
And then there’s spinning around the z-axis, like pole dancers do: rotateZ(0deg), etc:
(Just inserting some space.)
Note that x(180) + y(180) = z(180).
That’s enough spinning for one day.
Have a look at CSS Ref, which also describes rotate3D (which does x,y,z all in one go), as well as transforms like translate, scale and skew, amongst others.
CSS writing-mode, to get vertical writing, like in Chinese/Japanese or Mongolian mode, is still experimental: