HTML5实践 -- 使用css3创建动态3d立方体-阿里云开发者社区

开发者社区> bill.kang> 正文

HTML5实践 -- 使用css3创建动态3d立方体

简介:   在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。   demo地址:http://www.paulrhayes.com/experiments/cube-3d/   demo下载地址:animated-css3-cube.zip     下面我们开始介绍如何制作。
+关注继续查看

  在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。

  demo地址:http://www.paulrhayes.com/experiments/cube-3d/

  demo下载地址:animated-css3-cube.zip

 

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

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

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

 

  原文地址:http://www.paulrhayes.com/2009-07/animated-css3-cube-interface-using-3d-transforms/

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
Xcode3创建和使用iOS的dylib动态库
此文真正写于2011年4月,当时是xcode3.X版本。xcode4的路径会不同,方法请查看 Xcode4.6创建和使用iOS的dylib动态库。 文中提到的压缩文件在此下载http://download.
1108 0
优秀教程:使用 CSS3 动画实现的超炫的过渡特效
  Codrops 最近分享了一些很酷的图片切换灵感。有三种不同的用例:小的图像幻灯片,大标题幻灯片以及使用透明背景的产品幻灯片。状态转换使用 CSS 动画完成,我们能够定义从任何方向进来的图片的行为。
810 0
【CSS】使用CSS控制文字过多自动省略号
使用CSS可以设置一下样式: u,small{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -...
1008 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8466 0
c++ TADOConnection TADOQuery TDataSetProvider TClientDataSet 动态创建
TADOConnection *myADOConnection=new TADOConnection(NULL); TADOQuery *myADOQuery=new TADOQuery(NULL);TDataSetProvider *mDataSe...
771 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载