html5怎么实现3d效果

html-css012

html5怎么实现3d效果,第1张

我写了个正方体的模板,你可以按照你想要的把每个面旋转不同角度就行了

<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)