Shulou(Shulou.com)06/03 Report--

This article shows you how to rotate a DIV at an angle of 90 degrees / 180 degrees / 270 degrees and magnification and other problems, the content is concise and easy to understand, absolutely can make your eyes bright, through the detailed introduction of this article, I hope you can get something.

The front-end is a rookie, but there is a gis system problem that must be borrowed from the front-end technology, so temporarily cram and find that this idea to solve the problem, although not entirely a front-end problem, is still recorded, which may be helpful to anyone.

The first is the rotation of 90 degrees, 180 degrees, 270 degrees, the code is as follows:

The code is as follows:

-webkit-transform: rotate (90deg); / * Safari 4pm Google Chrome 1 + * /

-moz-transform: rotate (90deg); / * Firefox 3.5 percent /

Filter: progid:DXImageTransform.Microsoft.BasicImage (rotation=1); / * ie*/

The above two are easy to understand 90 degrees.

The following IE filter rotation has 4 values of 0 1 2 3; 0 does not rotate 1'90 degrees 2 '180 degrees 3' 270 degrees

In practice, it is found that you can't put it in style.

This doesn't work and must be put in the css declaration. Such as:

The code is as follows:

# example {

Transform: rotate (40deg)

-o-transform: rotate (40deg)

-webkit-transform: rotate (40deg)

-moz-transform: rotate (40deg)

Filter:progid:DXImageTransform.Microsoft.BasicImage (Rotation=2)

}

Secondly, you actually saw it, (40deg); that is to say, you can write anything except the ie point of view. While the angle of IE is troublesome at any angle, use the ie matrix filter, the code is as follows:

The code is as follows:

Filter: progid:DXImageTransform.Microsoft.Matrix (sizingMethod='auto expand', M11 colors 0.76604431189777, M12 colors 0.642787606865394, M21colors 0.642787606865398, M22colors 0.76604431189779) "

You can try it. This is an angle of about 40 degrees.

Immediately after trying to feel very powerful, but there is a big hole, that is, where did M11--M22 come from?

After learning

M11=cos (roation), M12=-sin (roation), M21=sin (roation), M22=cos (roation) roation is your point of view, but unfortunately, you can't write it this way directly. You have to work out the numbers yourself. Here is an online website for calculating trigonometric functions: http://www.ab126.com/geometric/1689.html.

Finally, add that DXImageTransform.Microsoft.Matrix can make your div zoom in and out, as long as the M11--M22 is enlarged or reduced by the corresponding multiple, but now the widescreen looks wrong.

The above content is how to rotate an DIV at an angle of 90 degrees / 180 degrees / 270 degrees and magnification and so on. Have you learned the knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.