Home >Web Front-end >CSS Tutorial >How to use CSS to create image rotation effects
Today I will teach you how to use CSS to create an image rotation effect in HTML. The image can be rotated at any angle, but the only compatibility issue is that it does not support browsers below IE9. As long as the browser supports H5, this effect is supported. .
The complete HTML code is as follows:
<!DOCTYPE HTML>
<html>
<head>
<title>图片旋转 在线演示</title>
<script type="text/javascript">
function startup() {
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function() {
ctx.translate(img.width / 2, img.height / 2);
ctx.rotate(30 * Math.PI / 120);
// 120为设置旋转角度
ctx.drawImage(img, 0, 0, 165, 60); // 165和60分别是图片宽度高度
}
}
</script>
</head>
<body onload='startup();'>
<p id="pw_body" style="width:100%;height:100%">
<canvas id="canvas" style="position: absolute; left: 300px; top: 100px;" width="800" height="600"></canvas>
</p>
<p>部分代码整理于网络</p>
</body>
</html>This html image rotation is to rotate the image as a web page background image, but it can be used according to actual needs. Because it is not compatible with lower versions of IE, it is not very practical.
I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!
Related reading:
Development experience using h tags in web pages
How to optimize HTML web pages
The above is the detailed content of How to use CSS to create image rotation effects. For more information, please follow other related articles on the PHP Chinese website!