css3 transform 3d 应用css3建立动态性3d立方体(html5实

日期:2020-10-13 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站

在今日的课程中,我将向大伙儿详细介绍怎样应用css3建立3d的立方体。大伙儿能够根据下面的连接访问具体实际效果,实际操作左右上下键,完成立方体的旋转实际效果。
demo详细地址:https://www.jb51.net/jiaoben/70022.html
下面大家刚开始详细介绍怎样制做。
html

拷贝编码
编码以下:

<div id="experiment">
<div id="cube">
<div class="face one">
One face
</div>
<div class="face two">
Up, down, left, right
</div>
<div class="face three">
Lorem ipsum.
</div>
<div class="face four">
New forms of navigation are fun.
</div>
<div class="face five">
Rotating 三d cube
</div>
<div class="face six">
More content
</div>
</div>
</div>

上面的html中,class为face的6个div各自意味着立方体的6个面,应用one到six的class姓名对她们加以区别。外界包括有id为cube和experiment的双层器皿,这双层全是务必的,少了任何1个,3d实际效果都出不来。
在其中experiment起到镜头的功效。对他设定焦距,这样3d实际效果才可以在內部元素上展现出来。
perspective特性界定z轴平面的深层,另外也界定了平面上面和下面元素的相对性规格。总的来讲,perspective值越小,物件越大,离你也越近;perspective值越大,物件越小,离你也越远。大伙儿能够根据http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查询实际效果。
perspective-origin特性界定视角的原点。
css

拷贝编码
编码以下:

#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}

cube设定的特性中包括固定不动的宽度和高宽比,并将position设定为relative。固定不动的高宽比和宽度是务必的,这样cube中的元素才可以在限制的地区内实行3d动漫。假如将高宽比和宽度设定为100%,cube中的元素将在全部网页页面范畴内健身运动。
transition用来设定动漫有关的特性。transform-style: preserve⑶d; 使得cube中的全部元素做为1个总体来造成3d实际效果。
大伙儿能够访问http://www.zhangxinxu.com/wordpress/2012/09/css3⑶d-transform-perspective-animate-transition/,掌握更多信息内容。
css:

拷贝编码
编码以下:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve⑶d;
-moz-transform-style: preserve⑶d;
-o-transform-style: preserve⑶d;
transform-style: preserve⑶d;
}

接下来统1为立方体的6个面设定css特性。
css

拷贝编码
编码以下:

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}

接下来可是设定6个面的3d有关特性,应用rotateX或rotateY来完成立方体表层房屋朝向的旋转,应用translateZ完成立方体表层在3维室内空间的部位挪动。
css

拷贝编码
编码以下:

#cube .one {
-webkit-transform: rotateX(90deg) translateZ(200px);
-moz-transform: rotateX(90deg) translateZ(200px);
-o-transform: rotateX(90deg) translateZ(200px);
transform: rotateX(90deg) translateZ(200px);
}
#cube .two {
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
transform: translateZ(200px);
}
#cube .three {
-webkit-transform: rotateY(90deg) translateZ(200px);
-moz-transform: rotateY(90deg) translateZ(200px);
-o-transform: rotateY(90deg) translateZ(200px);
transform: rotateY(90deg) translateZ(200px);
}
#cube .four {
-webkit-transform: rotateY(180deg) translateZ(200px);
-moz-transform: rotateY(180deg) translateZ(200px);
-o-transform: rotateY(180deg) translateZ(200px);
transform: rotateY(180deg) translateZ(200px);
}
#cube .five {
-webkit-transform: rotateY(⑼0deg) translateZ(200px);
-moz-transform: rotateY(⑼0deg) translateZ(200px);
-o-transform: rotateY(⑼0deg) translateZ(200px);
transform: rotateY(⑼0deg) translateZ(200px);
}
#cube .six {
-webkit-transform: rotateX(⑼0deg) translateZ(200px);
-moz-transform: rotateX(⑼0deg) translateZ(200px);
-o-transform: rotateX(⑼0deg) translateZ(200px);
transform: rotateX(⑼0deg) translateZ(200px);
}

最终要做的是为网页页面关联keydown恶性事件,这样当你按下左右上下键的情况下,完成立方体的旋转健身运动实际效果。
javascript:

拷贝编码
编码以下:

var xAngle = 0, yAngle = 0;
document.addEventListener('keydown', function(e)
{
switch(e.keyCode)
{
case 37: // left
yAngle -= 90;
break;
case 38: // up
xAngle += 90;
break;
case 39: // right
yAngle += 90;
break;
case 40: // down
xAngle -= 90;
break;
};
$('cube').style.webkitTransform = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg)";
}, false);

课程就讲到这里,接下来大伙儿能够动手能力尝试1下。