我写了个正方体的模板，你可以按照你想要的把每个面旋转不同角度就行了
<style type="text/css">html{
font-size:62.5%
}
img{
width:300px
height:300px
}
#stage{
margin-top:200px
margin-left:auto
margin-right:auto
width:300px
height:300px
perspective:1200px
font-size:5em
font-weight:bold
color:#cc00ff
}
.cube{
position:relative
transform:rotateX(-45deg) rotateY(45deg)
transform-style:preserve-3d
transition: all .6s
}
.side{
color:blue
text-align:center
width:300px
height:300px
line-height:300px
position:absolute
background:#cc66ff
opacity:0.5
border:1px solid rgba(117,4,24,0.5)
}
.front{
transform:translateZ(150px)
}
.back{
transform:rotateY(180deg) translateZ(150px)
}
.left{
transform:rotateY(-90deg) translateZ(150px)
}
.right{
transform:rotateY(90deg) translateZ(150px)
}
.top{
transform:rotateX(90deg) translateZ(150px)
}
.bottom{
transform:rotatex(-90deg) translateZ(150px)
}
#stage:hover .cube{
transform:rotateX(-45deg) rotateY(225deg)
transition:transform .6s
}
</style>
</head>
<body>
<div id="stage">
<div class="cube">
<div class="side front"><img src="6.gif" alt="" /></div>
<div class="side back"><img src="2.jpg" alt="" /></div>
<div class="side left"><img src="3.jpg" alt="" /></div>
<div class="side right"><img src="4.jpg" alt="" /></div>
<div class="side top"><img src="5.jpg" alt="" /></div>
<div class="side bottom"><img src="1.jpg" alt="" /></div>
</div>
</div>
</body>
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)
