CSS image rotation

Switch: bytes

Image rotation can be said to be an effect, but gradually, the rotation is not only in the category of visual effects, it is more useful and functional. As we all know, sometimes a photo needs to be taken in a horizontal way. It needs to be rotated when we preview or share it on the web. In the past, this operation may be performed by the software, and then the images rotated to the normal angle are published to the web. However, you can now directly rotate images on the web. Even if the image processing software is more convenient and easy to use, it is not as convenient as making adjustments to images during Direct Publishing. This is the practical significance of the image rotation function. We can see this image rotation function on Sina Weibo.

Ii. CSS3 and image rotation

CSS3 supports image rotation: CSS3> transform> rotate. For example, the following CSS code:

-moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg);

Apply it to the image. The result is as follows (captured from Firefox3.5 ):

As shown in the left figure, the image is rotated-90 degrees, that is, 270 degrees clockwise. The rotation effect under CSS3 can be applied not only to images, but also to any inline horizontal or block horizontal elements. It can be used to rotate at any angle. I have also written a related article: CSS3 transition implements the animation effect of the ultra-cool image wall, which contains some introductions about CSS3 transform.
Inevitably, when it comes to CSS3, we need to talk about "support". Similar to some other CSS3 attributes, it is not supported by IE browser and not by Opera. Only Firefox3 + is supported. chrome and Safari support the rotate attribute of transform. Therefore, it is difficult to use CSS to achieve the rotation effect. If you do not want to mention anything else, you have to solve the problem that IE is the big browser. Fortunately, the private filter of IE can achieve the rotation of elements. See the next section.

Iii. IE filter and image rotation

The filter of IE is not really a good thing. I personally feel like this, like a self-righteous tyrant, but often there is no way to think of it. The simplest Effect of image rotation in IE is its private filter attribute.

First, the Code is as follows:

filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

The results are consistent with the above results:

Here, the filter code section. We don't need to worry about the long and case-sensitive section. The following "rotation = 3" is the key. The parameter here can be 0, 1, 2, 3, not 4, if it is 4 or 5, the image will not be rotated. The rotation angle only needs to multiply these values by 90 (π/2), so "rotation = 3" indicates clockwise rotation of 270 degrees, with transform: rotate (270deg ); is a meaning. So here, there will be some small limitations-you cannot achieve any angle of rotation, only 90 degrees, 180 degrees and 270 degrees. However, IE browser is not a simple Luo. To achieve rotation at any angle, it still has a way, but it is more difficult to understand than above, and it needs to use a Matrix Transform filter.

Ps: It is said that it is purely said that I have never met it so far. In the IE8 browser (in non-standard mode), in CSS, "-ms-filter" should be used to replace "filter ".

First, run the instance code. The following code will rotate the image 60 degrees along the pointer:

filter:progid:DXImageTransform.Microsoft.Matrix(M11=0.5,M12=-0.866,M21=0.866,M22=0.5,SizingMethod='auto expand');

As a result, the effect of IE6 is:

Here, there seem to be a lot of filter parameters, which are quite appealing. However, it is also common to split them apart.

We only need to pay attention to this part: "M11 = 0.5, M12 =-0.866, M21 = 0.866, M22 = 0.5". Someone may ask, the answer is simple-"calculated ". Assuming that the rotation angle is rotation, the calculation process is as follows:

sin = sin(roation);cos = cos(roation);
M11 = cos;M12 = -sin;M21 = sin;M22 = cos;

For example, if the rotation is 60 degrees, that is, rotation = 60, sin = sin (60) = 0.866, cos = cos (60) = 0.5, then "M11 = 0.5, m12 =-0.866, M21 = 0.866, M22 = 0.5 ″. So remember the following formula to rotate images from any angle in IE:filter:progid:DXImageTransform.Microsoft.Matrix(M11=cos(roation),M12=-sin(roation),M21=sin(roation),M22=cos(roation),SizingMethod='auto expand');

This matrix filter can also be scaled.

Iv. Comprehensive and comparison of CSS 3 and IE filter image rotation

Check a comprehensive instance for comparison.
The CSS code is as follows:

#rot90{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}#rot135{-moz-transform:rotate(135deg); -webkit-transform:rotate(135deg); transform:rotate(135deg); filter:progid:DXImageTransform.Microsoft.Matrix(M11=-0.707,M12=-0.707,M21=0.707,M22=-0.707,SizingMethod='auto expand');}

HTML section:

 Rotate 90 °  rotate 135 °

The following is a comparison between IE and Firefox:

As marked, although it seems that the rotation effect is the same, the rotation in CSS3 does not actually change the space occupied by the original image, therefore, you will see that the image rotated using CSS3 transform can be overwritten on other elements, but IE is not the case. The size of the image occupied by space is consistent with that of the rotated image, therefore, if the IE filter is rotated, the image will not overwrite other elements, because it will squeeze them out.

If Opera browsers with extremely low usage in China and Firefox2 and below are not considered, things (image rotation) seem easy.
, We seem to be able to easily achieve image rotation-for example, the implementation of Sina Weibo image rotation effect can be changed as long as the class is changed. But can we discard operabrowser and Firefox2 and earlier browsers? It depends on the target group, size, and nature of your website. In the current situation, it is generally impossible to give up, which forces us to find another way out. This is the canvas tag in HTML5.

5. canvas labels and image rotation

First of all, let's talk about the canvas label. canvas is an HTML element and is designed for vector graphics on the client side. It does not act on its own, but presents a drawing API to the client JavaScript so that the script can draw everything you want to draw on a canvas.

<Canvas> tags are introduced by Apple in the Safari 1.3 Web browser. The root extension of HTML is that HTML's drawing capability in Safari is also used by the Dashboard component on Mac OS X desktop, in addition, Apple wants to support scripted graphics in the Dashboard. Both Firefox 1.5 and Opera 9 follow the guidance of Safari. Both browsers support <canvas> labels (IE can also support canvas labels by using js plug-ins ). Therefore, although pure CSS cannot take care of opera browsers and earlier versions of Firefox, it does not matter. We can use canvas labels.

Canvas only has a JavaScript-Based Drawing API. Therefore, to use canvas for drawing, JavaScript is not required. Let's talk about it. Let's take a look at how to use canvas + JavaScript to rotate images.

Here, IE is put aside first. Let's see how to use canvas to rotate 90 degrees. The Code is as follows:

HTML section<Canvas id = "cv"> </canvas> JavaScript SectionWindow. onload = function () {var canvas = document. getElementById ("cv"); var oImg = document. getElementById ("cvImg"); // the size of the canvas label after rotation. height = 128; canvas. width = 96; // The drawing starts var context = canvas. getContext ("2d"); context. save (); // change the central point context. translate (); // Rotate 90 ° context. rotate (Math. PI/2); // draw context. drawImage (osmg, 0, 0,128, 96); context. restore (); oImg. style. display = "none ";};

The result is displayed in the Opera9 browser that does not support CSS3 transform:

If you want IE to have the same effect, it's very easy to add the following code:
<!- -[if IE]><script type="text/javascript" src="http://www.zhangxinxu.com/style/js/excanvas.js"></script><![endif]- ->(To prevent annotation conflicts, the dual connection lines are separated by spaces)

Among them, the linked js file enables IE to support the JavaScript plug-in of the canvas label, which can achieve the effects of most canvas labels. Of course, you can try to rotate the image.

Vi. jQuery plug-in for rotating Effects

Through some of the above discussions, we can find that there are actually a lot of ways to achieve image rotation. The jQuery plug-in here uses the method of filter + other browsers canvas under IE.

The plug-in is less than 2 k after compression, and is a lightweight plug-in that is very delicate. Images of any angle can be rotated, which is easy to use. For example:$("imgRotate").rotate(90);It indicates that the rotation is 90 degrees. If you want to turn left or right, there is a special method, that is, $ ("selector "). rotateLeft (); and $ ("selector "). rotateRight ();

For more information, see the next section.

VII. Image Rotation instance

The effect of this example is the "Turn left" and "Turn right" Effects of the pictures on Sina Weibo. Three methods will be used. One is to ignore the CSS methods of earlier Firefox and operabrowser; the other is to use jquery plug-in to implement the effect; the third is to implement pure canvas labels without JavaScript libraries.

Incompatible CSS Methods
The principle of this method is very simple. It switches the class of the HTML Element Object (image. The following CSS code:

.rot1{-moz-transform:rotate(90deg); -webkit-transform:rotate(90deg); transform:rotate(90deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=1);}.rot2{-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg); transform:rotate(180deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=2);}.rot3{-moz-transform:rotate(270deg); -webkit-transform:rotate(270deg); transform:rotate(270deg); filter:progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}

Then add a simple JavaScript code-dynamically change the class name based on whether to turn left or right.
The css3 + filter method is used here, So earlier Firefox versions have no effect in the current operabrowser. But it is definitely applicable to over 90% Internet users.

JQuery plug-in implementation method
The use of plug-ins is generally relatively simple. However, the plug-in JS is a lightweight code plug-in with limited functions. This plug-in only supports image rotation once without any special processing, because the analysis plug-in shows that after running a canvas rotation, the canvas tag will replace the original image tag so that continuous image rotation is troublesome. You need to re-enter the image-related HTML code after each rotation.
The javascript code described above is as follows:

Param. Right. Click (function () {If (! $ ("IMG # rotimg"). Length ){Param.box.html (' ');} Fun. Right (); // execute the right rotation return false ;});

The jquery Library and the lightweight rotation plug-in need to be upgraded in Js.

Note: This effect seems to be a problem in IE. I often click "no rotation" and click "Skip" to skip the previous rotation. I don't know the problem of this plug-in, it's still the bug in IE that the filter matrix filter data is transformed, or the JS part is caused by the problem. I hope anyone can tell me the reason. Thank you very much!

Canvas Method
This method does not rely on any JavaScript library, it is highly compatible and has no unknown problems. I like it myself. To enable Internet Explorer to support canvas labels, you need to call a JS plug-in, which is initiated by Google.