纯HTML5+CSS3制作图片旋转-猿码集

HTML5和CSS3为前端设计师提供了更多的创意和设计自由度。图片旋转是网页设计中非常常见的效果，本文将介绍如何用纯HTML5和CSS3实现图片旋转的效果。

HTML5

HTML5提供了canvas元素，它可以用于绘制图形和动画，并可以通过JavaScript来控制它们。canvas元素的使用方法如下：


<canvas id="myCanvas"></canvas>

其中`<canvas>`元素没有内容。要在其中绘制图形，需要使用JavaScript。首先，获取canvas元素的对象：


var canvas = document.getElementById("myCanvas");

接下来就可以使用canvas对象来绘制图形和动画了。

CSS3提供超过100个新的特性，其中包括3D旋转。CSS3的3D旋转可以通过以下代码实现：


transform: rotate3d(x, y, z, angle);

其中，`(x, y, z)`指定了一个旋转轴，`angle`就是旋转度数。通过改变旋转轴和旋转度数，可以创建各种各样的旋转效果。

通过HTML5的`<canvas>`元素，我们可以创建一个`<img>`元素，并在其中绘制我们需要旋转的图片。首先，需要将`<canvas>`元素的大小设置为跟图片的大小一样：


#myCanvas {
    width: 300px;
    height: 300px;
}

然后，在JavaScript中获取`<canvas>`元素和图片对象：


var canvas = document.getElementById("myCanvas");
var img = document.getElementById("myImg");

接着，可以使用canvas对象的`drawImage()`方法在canvas中绘制图片：


var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

最后，使用CSS3的旋转效果来旋转`<canvas>`元素：


#myCanvas {
    -webkit-transform: rotate3d(0, 1, 0, 45deg);
    transform: rotate3d(0, 1, 0, 45deg);
}

完整的代码如下：


#myCanvas {
    width: 300px;
    height: 300px;
    -webkit-transform: rotate3d(0, 1, 0, 45deg);
    transform: rotate3d(0, 1, 0, 45deg);
}

此时，效果如下：

需要注意的是，此方法只能实现单个图片的旋转。如果需要实现多个图片的旋转效果，可以使用JavaScript来动态创建多个`<canvas>`元素。

本文介绍了利用HTML5和CSS3实现图片旋转的方法。通过`<canvas>`元素绘制图片，在配合CSS3的3D旋转效果，可以很容易地实现图片旋转效果。