html5如何让图片3d旋转？

图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用 3D 转换来对元素进行格式化。

示例代码如下：

<style>

*{margin:0padding:0}/*简单可以自定义，参照上面*/

body{font:14px/1.5 "\5FAE\8F6F\96C5\9ED1","\5B8B\4F53", sans-serif, Arial, Systembackground-color:#FFF}

#imgg{animation:imgg 1s linear 0s infinite}

@keyframes imgg{0% {transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}100% {transform:rotateY(360deg)}}

</style>

<div id="demo">

<img src="图片地址" alt="" width="100" height="100" id="imgg">

</div>

html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。

比如可以用以下方法实现图片的360度旋转：

代码示例：

var render, loop, t, dt, //定义变量

DEG2RAD = Math.PI / 180, //角度转弧度

cvs = document.querySelector('canvas'), //创建canvas

ctx = cvs.getContext('2d'),//绘制2d图形上下文

teddy = new Image(), //创建图像

heart = new Image(), //创建图像中心

angle = 0,//初始化角度为0

reqAnimFrame =

window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.msRequestAnimationFrame ||

window.oRequestAnimationFrame

//创建动画帧

cvs.width = 400

cvs.height = 200

teddy.src = 'xxx.jpg'

heart.src = 'yyy.jpg'

//开始渲染

render = function (timestamp) {

dt = timestamp - t

t = timestamp

// cavas设置为白色

ctx.fillStyle = "rgb(255,255,255)"

ctx.fillRect(0, 0, cvs.width, cvs.height)

// 绘制中心

ctx.drawImage(heart, -20, -120)

// 绘制teddy

ctx.save()

ctx.translate(cvs.width/2, cvs.height/2)// 移动鼠标到画布中心

ctx.rotate(DEG2RAD * angle)// 旋转画布

ctx.drawImage(teddy, -teddy.width/2, -teddy.height/2)// 绘制中心图片

angle += dt / 16.67 * 6// increment angle ~ 360 deg/sec

ctx.restore()

}

loop = function (timestamp) {

reqAnimFrame(loop)

render(timestamp)

}

t = Date.now()

loop(t)

在http://blog.gougou.com/输入“旋转木马”，可以下载“旋转木马”的双语版本。使用播放器播放下载的电视剧时，可以根据自己的意愿调解“音频设置”，“左声道”是韩语，“右声道”是中文。我家的电脑上也下载了双语版的“旋转木马”，可以看中文的。

---