Several ways to implement image rotation in Web pages

There are three common implementations of image rotation in Web pages:

First, IE filter

IE's graphics rotation filter, which rotates the element by specifying the rotation value of the basicimage filter, rotates in a clockwise direction, and the center point of the rotation is the upper-left corner of the element. Rotation can have 4 rotation values: 0, 1, 2, and 3, respectively, to rotate the element 0 degrees, 90 degrees, 180 degrees, 270 degrees.

Browser support: ie5.5+

CSS code:

. rotate{Filter:progid:DXImageTransform.Microsoft.BasicImage (rotation=3);}

　　

JS Code:

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

Second, CSS3 transform

The Transform property of CSS3 allows us to rotate, scale, and move elements. You can rotate an element by passing a rotate (degree) value to it, positive values are rotated clockwise, negative values are rotated counterclockwise, and the center of the rotation is the center of the element.

Browser support: Firefox 4+, Oprea + +, Safari 3.1+, Chrome 8+, IE + +

CSS code:

.rotate{    -ms-transform:rotate(90deg); /* IE 9 */    -moz-transform:rotate(90deg); /* Firefox */    -webkit-transform:rotate(90deg); /* Safari and Chrome */    -o-transform:rotate(90deg); /* Opera */}

JS Code:

element.style.webkitTransform="rotate(-90deg)"element.style.MozTransform="rotate(-90deg)"element.style.msTransform="rotate(-90deg)"element.style.OTransform="rotate(-90deg)"element.style.transform="rotate(-90deg)";

Third, HTML5 canvas rotate

Using the Context.rotate (angle) method of the canvas 2d drawing context object, the rotation of the picture is achieved by specifying the radian rotation axis that needs to be rotated, positive values are rotated clockwise, negative values are rotated counterclockwise, and the center point of the rotation is the top left corner of the canvas. The equation for angle conversion radians is: radians = angle * math.pi/180.

Browser support:Chrome 1.0+,Firefox 1.5+,Opera 9.0+,Safari 1.3+, IE + +

JS Code:

context = canvas.getContext("2d")context.rotate(90 * Math.PI / 180);context.drawImage(img, 0, -img.height);

Several ways to implement image rotation in Web pages