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

Xiaobian to share with you how to achieve HTML image rotation, I believe most people still do not know how to share this article for your reference, I hope you have a lot of harvest after reading this article, let's go to understand it together!

HTML image rotation, HTML5+CSS3+JS image rotation effect, image rotation at any angle only supports IE9 and above browsers, supports Google, Firefox, safari browsers. Any browser that supports HTML5 will support this html rotation effect.

Original picture and rotated picture screenshot rotated picture effect screenshot

The complete HTML code is as follows:

Image rotation online demo www. com function startup() { var canvas = document.getElementById ('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = '-logo-201305.gif'; img.onload = function() { ctx.translate (img.width / 2, img.height / 2); ctx.rotate(30 * Math.PI / 120); // 120 for setting rotation angle ctx.drawImage(img, 0, 0, 165, 60); // 165 and 60 for image width height respectively} }

Part of the code is organized in the network

This html image rotation is to rotate the image as the background image of the web page, but it is actually used as needed. Because it is not compatible with lower versions of IE, it is not very practical.

Online Demo: View Cases

Package download:

Download now (3KB)

DIVCSS5 recommends:

If you want to make the image rotation compatible with all major browsers, it is recommended to design the required rotation effect of the image itself, and then cut out the image as a picture or web page background to use, so that compatibility is good, saving DIV CSS code.

The above is "How to achieve HTML image rotation" all the content of this article, thank you for reading! I believe that everyone has a certain understanding, hope to share the content to help everyone, if you still want to learn more knowledge, welcome to pay attention to 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.