1 图片的旋转实现方式有很多，比如js实现，现在比较简单的方法是使用css3里面的；transform属性来实现，很方便的。其实这个题目很简单，在百度里面搜索一下css3旋转就看到了，里面的手册介绍的很清楚，下面是代码以及显示效果都呈现出来；
2 下面是写的一个实例代码，代码可以直接运行。代码的解释有备注哦；总共代码呢其实没有几行，主要就是 transform属性的应用 代码中的90deg就是90度的意思
<!DOCTYPEhtml>
<html>
<head>
<style>
body{margin:0pxpadding:0px}
/*{transform就是专门为img图片设置的旋转*/
#img1{transform:rotate(90deg)border:1pxsolidred}
</style>
</head>
<body>
<imgid="img1"src="38.png"/>/*页面中显示的图片*/
</body>
</html>
3代码在浏览器的运行效果图：
css代码：.rotator
{
text-align:center
}
.rotator img {
-webkit-transition: all 1s ease-in-out
-moz-transition: all 1s ease-in-out
-o-transition: all 1s ease-in-out
-ms-transition: all 1s ease-in-out
}
.rotator img:hover {
-webkit-transform: rotate(360deg)
-moz-transform: rotate(360deg)
-o-transform: rotate(360deg)
-ms-transform: rotate(360deg)
}
/*360deg是360度，度你可以自己写*/
要控制canvas旋转图片需要用到HTML5中canvas的rotate方法。我们通过一个具体的示例进行分析。<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片旋转</title>
</head>
<body>
<div id="result-stub" class="well hidden">
<canvas id="canvas" width="345" height="345">
<p>你的浏览器不支持canvas元素</p>
</canvas>
</div>
<script>
window.onload=function() {
//1、 获取到画布对象以及画布的上下文对象
var canvas = document.getElementById('canvas')
var context = canvas.getContext('2d')
//2、 在画布上进行图片绘制
var img = new Image()
img.src = 'fist-pump-baby.jpg'//这里是绘制图片的路径
img.onload = function() {
context.drawImage(img, 0, 0)
}
//3、 设置画布旋转
context.rotate(0.2)//通过rotate方法以弧度为参数旋转图像
//在rotate中传入的参数为弧度。如果你对弧度不太了解，在HTML5中还提供了一个函数degreeToRadians（）。它可以将度数转换为弧度。这里传入-15，即表示将图像向左旋转15度。如需把旋转的角度转换为弧度的公式为：( 度数*PI )/ 180。这两种传入弧度的方法你选择一种即可。
//context.rotate(degreesToRadians(-15))
}
</script>
<script src="jquery.js"></script>
</body>
</html>
这些都是有关于HTML5新特性的一些应用。给你推荐一个教程网站秒秒学，该网站上有关于HTML5新特性的讲解，可以去看看，希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）