代码示例：
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)
图片旋转可以用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>
以下是代码：<!DOCTYPE html>
<html>
<head>
<title>transform-style实现Div的3D旋转-柯乐义</title>
<style>
*{font-size: 24pxcolor: #00ff00padding:0margin:0}
#container {
position: relative
height: 300px
width: 300px
-webkit-perspective: 500
margin-top: 200px
margin-right: auto
margin-left: auto
}
#parent-keleyi-com {
margin: 10px
width: 280px
height: 280px
background-color: #666
opacity: 0.3
-webkit-transform-style: preserve-3d
-webkit-animation: spin 15s infinite linear
}
#parent-keleyi-com >div {
position: absolute
top: 40px
left: 40px
width: 280px
height: 200px
padding: 10px
-webkit-box-sizing: border-box
}
#parent-keleyi-com >:first-child {
background-color: #000
-webkit-transform: translateZ(-100px) rotateY(45deg)
}
#parent-keleyi-com >:last-child {
background-color: #333
-webkit-transform: translateZ(50px) rotateX(20deg)
-webkit-transform-origin: 50% top
}
/*执行Y轴旋转360度动画*/
@-webkit-keyframes spin {
from {-webkit-transform: rotateY(0)}
to {-webkit-transform: rotateY(360deg)}
}
</style>
</head>
<body>
<div>请使用支持CSS3的浏览器<a href="http://keleyi.com/a/bjad/s89uo4t1.htm" target="_blank">原文</a></div>
<div id="container">
<div id="parent-keleyi-com">
<div><a href="/">柯乐义</a></div>
<div><a href="/">keleyi.com</a></div>
</div>
</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）