Flipping this way and that way

κατοπτρο (katoptro): reflector (physics); mirror.


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.



Sample vertical text (CSS vertical demo from: davidwalsh: Demo.

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:

Sample vertical text, not so vertical




And the 270-degree version:

Sample vertical text, the other way up




Similar effect with the CSS transform element, set to rotateY(0deg) rotateX(0deg), and so on:

Sample text 民國 transform: rotateY(0deg) rotateX(0deg)



Sample text 民國 transform: rotateY(0deg) rotateX(180deg)



Sample text 民國 transform: rotateY(180deg) rotateX(0deg)



Sample text 民國 transform: rotateY(180deg) rotateX(180deg)





And then there’s spinning around the z-axis, like pole dancers do: rotateZ(0deg), etc:

Sample text 民國 transform: rotateZ(0deg)




Sample text 民國 transform: rotateZ(90deg)




Sample text 民國 transform: rotateZ(180deg)




Sample text 民國 transform: rotateZ(270deg)





(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: