css3 transform 3d 使用css3创建动态3d立方体(html5实践
分类:计算机教程

css3新技术已经出来有很长时间了,最近想搞点东西出来,一边学一边构思,终于出来点成绩,我在博客了近期公布,有兴趣的一起来玩玩,css3真的不错,当然我做的都是基于google浏览器的,别的浏览器的还没有考虑,大爱google,但是这浏览器也太占内存了,坑爹有木有啊?

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

说起css3就不得不提3d transform;这也是我最近想搞这方面的原因。html5 canvas api里可以做个3d效果,css3出现真是减少了不少功夫啊!

在今天的课程中,我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果,操作上下左右键,实现立方体的翻转效果。
demo地址http://www.jb51.net/jiaoben/70022.html
下面我们开始介绍如何制作。
html

美洲杯赔率,首先先做一个立方体需要,有六个面,每个面试一张图片。好的,开始写代码:

代码如下:

<body>          <div id="wrap">              <div id="container" class="cube backface">                                <div class="inBox before"><img src="img/7.jpg" /></div>              <div class="inBox back"><img src="img/2.jpg" /></div>              <div class="inBox left"><img src="img/3.jpg" /></div>              <div class="inBox right"><img src="img/4.jpg" /></div>              <div class="inBox top"><img src="img/5.jpg" /></div>              <div class="inBox bottom"><img src="img/6.jpg" />              </div>              </div>          </div>  </body>

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

首先定义了一个wrap,然后是一个container。里面的是六张图片。图片的定位需要position:absolute,需要绝对定位。3d效果无可厚非就要有观察者,perspective属性就是视角的距离,也就是观察者与这个物体的远近距离,3d之所效果好无非就是近大远小嘛,所以这个是一定要有的,再有就是你看的方位,说白了就是你看的是人的脸呢,是胸呢,还是什么别的地方呢,所以有个perspective-origin,这个定义3d的基点,就是你要看的焦点。但是这两个属性现在浏览器还不支持,google浏览器有私有属性-webkit-perspective,-webkti-perspective-origin,替代上面的属性。所以说google很牛掰的。接下来就要把这个属性加到哪里呢,当时要加到wrap里面,后来测试其实加到container里面也可以,这连个属性都是说它的子元素变换效果的视图距离。然后是在container上进行3d处理,-webkit-transform-style: preserve-3d;这个是告诉dom子元素保留3d位置,呈现的结果当然即使3d效果喽。

上面的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

基本工作做完了,接着就是对img的处理,要把这个做成立方体,首先得div.inBox 飘起来,首先从四个侧面做起,前面的面当然可以保持不动,但是其余的面就需要旋转了,怎么旋转,绕中心分别旋转90,180,270度,就可以喽,试试效果!

代码如下:

.inBox{      width:300px;      height:300px;      -webkit-border-radius:25px;      opacity: 0.8;       position: absolute;                   }  img{      display:block;      -webkit-border-radius:5px;      width:100%;      height:100%;     }

#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 .before{
-webkit-transform: scale3d(0.8, 0.8, 0.8);
}
.cube .left{
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) ;
}
.cube .back{

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:

-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) ;
}
.cube .right{
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) ;
}

代码如下:

  那么好的自己试一下是不是效果很纠结,四个图片挤到一起。对喽,现在就要给他们留下空间,撑开空间就ok了。translateZ()这个就是撑开空间的属性,在z轴上移动多远呢,就得用下数学知识了美洲杯赔率 1这个就是要求的z的距离啊,角度是45度,宽度300,z=150喽,把它写进代码里面,看看结果怎么样

#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;
}

本文由美洲杯赔率发布于计算机教程,转载请注明出处:css3 transform 3d 使用css3创建动态3d立方体(html5实践

上一篇:JavaScript 多级联动select 下一篇:没有了
猜你喜欢
热门排行
精彩图文
  • JavaScript 多级联动select
    JavaScript 多级联动select
    请到这里看09-08-18更新版本 能够根据自定义的菜单数据和select,自动设置联级的下拉菜单,可定义默认值。 类似的多级浮动菜单网上也很多实例,但大部分
  • Bootstrap 2.2.2 发布,重要的 Bug 修复版本
    Bootstrap 2.2.2 发布,重要的 Bug 修复版本
    今天我们发布了 Bootstrap 2.2.2, 这是另外一个很大的 bugfix版本,主要是侧重于 CSS 和文档方面的问题修复,也有很小一部分的JS问题,主要包括: Docs: Asset
  • 每天一个linux命令 chgrp命令
    每天一个linux命令 chgrp命令
    [root@localhost test]# ll---xrw-r-- 1 root root 302108 11-13 06:03 log2012.log[root@localhost test]# chgrp -v bin log2012.log“log2012.log” 的所属组已更改为 bin[root@localhost test]# ll---xr
  • 我是如何跨专业零基础学习Python爬虫的(2 爬虫所
    我是如何跨专业零基础学习Python爬虫的(2 爬虫所
    列表是Python中最基本的数据结构,列表是最常用的Python数据类型,列表的数据项不需要具有相同的类型。列表中的每个元素都分配一个数字 2. Python 列表
  • TCP socket如何判断连接断开
    TCP socket如何判断连接断开
    自己做了一个tcp工具,在学习动画的时候踩了坑,需求是根据上线变绿色,离线变灰色,如果连接断开了,则变为灰色 http://blog.csdn.net/zzhongcy/article/detail