html3d旋转?
发布网友
发布时间：2024-10-01 15:24
共1个回答
热心网友
时间：2024-11-11 02:46
以下是代码：
!DOCTYPEhtml
html
head
titletransform-style实现Div的3D旋转-柯乐义/title
style
*{font-size:24px;color:#00ff00;padding:0;margin: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:spin15sinfinitelinear;
}
#parent-keleyi-comdiv{
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-keyframesspin{
from{-webkit-transform:rotateY(0);}
to{-webkit-transform:rotateY(360deg);}
}
/style
/head
body
div请使用支持CSS3的浏览器ahref=""target="_blank"原文/a/div
divid="container"
divid="parent-keleyi-com"
divahref="/"柯乐义/a/div
divahref="/"keleyi.com/a/div
/div
/div
/body
/html
html5怎样引入三维模型，创建360度旋转浏览？
html5中引入3d模型的方法是借助第三方PlayCanvas插件来完成的。
比如可以用以下方法实现图片的360度旋转：
代码示例：
varrender,loop,t,dt,//定义变量
DEG2RAD=Math.PI/180,//角度转弧度
cvs=document.querySelector('canvas'),//创建canvas
ctx=cvs.getContext('2d'),//绘制2d图形上下文
teddy=newImage(),//创建图像
heart=newImage(),//创建图像中心
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;//incrementangle~360deg/sec
ctx.restore();
};
loop=function(timestamp){
reqAnimFrame(loop);
render(timestamp);
};
t=Date.now();
loop(t);
html5如何让图片3d旋转？图片旋转可以用CSS3中的动画效果来做，CSS3中，允许使用3D转换来对元素进行格式化。
示例代码如下：
style
*{margin:0;padding:0;}/*简单可以自定义，参照上面*/
body{font:14px/1.5"\5FAE\8F6F\96C5\9ED1","\5B8B\4F53",sans-serif,Arial,System;background-color:#FFF;}
#imgg{animation:imgg1slinear0sinfinite;}
@keyframesimgg{0%{transform:rotateY(0deg);}25%{transform:rotateY(90deg);}50%{transform:rotateY(180deg);}75%{transform:rotateY(270deg);}100%{transform:rotateY(360deg);}}
/style
divid="demo"
imgsrc="图片地址"alt=""width="100"height="100"id="imgg"
/div
