足球游戏_中国足彩网¥体育资讯$

css3 transform 3d 使用css3创建动态3d立方体(html5实践)
来源:易贤网 阅读:1371 次 日期:2016-08-01 15:21:09
温馨提示:易贤网小编为您整理了“css3 transform 3d 使用css3创建动态3d立方体(html5实践)”,方便广大网友查阅!

在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体,操作方法为:上下左右键,实现立方体的翻转旋转效果,特酷,本人看后,目瞪口呆,值得收藏于参考

下面我们开始介绍如何制作。

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 3D cube

</div>

<div class="face six">

More content

</div>

</div>

</div>

上面的html中,class为face的6个div分别代表立方体的6个面,使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器,这两层都是必须的,少了任何一个,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-3d; 使得cube中的所有元素作为一个整体来产生3d效果。

大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-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-3d;

-moz-transform-style: preserve-3d;

-o-transform-style: preserve-3d;

transform-style: preserve-3d;

}

接下来统一为立方体的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(-90deg) translateZ(200px);

-moz-transform: rotateY(-90deg) translateZ(200px);

-o-transform: rotateY(-90deg) translateZ(200px);

transform: rotateY(-90deg) translateZ(200px);

}

#cube .six {

-webkit-transform: rotateX(-90deg) translateZ(200px);

-moz-transform: rotateX(-90deg) translateZ(200px);

-o-transform: rotateX(-90deg) translateZ(200px);

transform: rotateX(-90deg) 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);

就讲到这里,接下来大家可以动手尝试一下。

中国足彩网信息请查看网页制作
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标