CSS rotation and flip use examples

CSS 2.0 is still not flipped, 3.0 has the Rotate property, this can be the elements of any angle rotation, gray often powerful, there is a good example, we can refer to the following

A project to draw a graph, there are horizontal and vertical axis, ordinate needs text to turn to vertical row, Baidu a circle, find an article, useful, reproduced come for reference

CSS 2.0 is still not flipped, 3.0 has the Rotate property, this can be the element to rotate at any angle, gray is often powerful. In addition to this rotate, there is also a scale, the general usage format is

-moz-transform:scale (a);

The former represents the x-axis, the latter represents the y-axis, when the number is greater than 1 o'clock magnification, greater than 0 and less than 1 o'clock shrink, very good understanding, then negative is how the effect? The answer is flip.

-moz-transform:scale ( -1,1);

indicates horizontal flipping;

-moz-transform:scale (1,-1);

Represents a vertical flip.

But these are Moz or webkit, what about the evil ie?
So we think of the filter, the filter contains a bunch of things:

Rotate the picture 90 degrees clockwise
Picid.style.filter= "Progid:DXImageTransform.Microsoft.BasicImage (rotation=1)";
Rotate 180 degrees
Picid.style.filter= "Progid:DXImageTransform.Microsoft.BasicImage (rotation=2)";
Rotate counterclockwise 90 degrees
Picid.style.filter= "Progid:DXImageTransform.Microsoft.BasicImage (rotation=3)";

Ever want to ask "rotation=4" what effect? Wall to ... 90, 180, 270 have come out, also want to rotation=4 achieve 360 Why, feel this very expense. But this is static fee, if dynamic, this is necessary. If the JS control element rotation, from 0 clockwise to 270, if there is no 360, then 270 will quickly counterclockwise back 0, so 2, so to give a 360 transition, let 270 natural to 360, and then cycle, so smooth ...

This is similar to CSS3 's rotate, but only fixed angle of rotation, to a clockwise 15 degrees did not fold, CSS is really very easy transform:rotate (15DEG);

However, this is only achieved "rotation", and "flip" did not achieve. The flip of IE needs to use this:

Horizontal flip: filter:fliph;
Vertical flip: FILTER:FLIPV;

This is complete.

Specific code:
1, Horizontal flip-moz-transform:scale ( -1,1);
-webkit-transform:scale ( -1,1);
-o-transform:scale ( -1,1);
Transform:scale ( -1,1);
Filter:fliph;

2, Vertical flip
-moz-transform:scale (1,-1);
-webkit-transform:scale (1,-1);
-o-transform:scale (1,-1);
Transform:scale (1,-1);
FILTER:FLIPV;

3. Rotate clockwise 90 degrees

-moz-transform:rotate (90DEG);
-webkit-transform:rotate (90DEG);
-o-transform:rotate (90DEG);
Transform:rotate (90DEG);
Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=1);

CSS rotation and flip use examples