玩转 css3
css3新技术已经出来有很长时间了，最近想搞点东西出来，一边学一边构思，终于出来点成绩，我在博客了近期公布，有兴趣的一起来玩玩，css3真的不错，当然我做的都是基于google浏览器的，别的浏览器的还没有考虑，大爱google，但是这浏览器也太占内存了，坑爹有木有啊？
说起css3就不得不提3d transform;这也是我最近想搞这方面的原因。html5 canvas api里可以做个3d效果，css3出现真是减少了不少功夫啊！
首先先做一个立方体需要，有六个面，每个面试一张图片。好的，开始写代码：
<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>
首先定义了一个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效果喽。
基本工作做完了，接着就是对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%;
}
.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{
-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轴上移动多远呢，就得用下数学知识了
这个就是要求的z的距离啊，角度是45度，宽度300,z=150喽，把它写进代码里面，看看结果怎么样
.cube .before{ -webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(150px); } .cube .left{ -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(150px); } .cube .back{ -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(150px); } .cube .right{ -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(150px); }
再试试，ok效果应该出现了吧，一个没有上下面的立方体，最后处理这上下面，同样是需要移动这个距离，然后呢需要绕X轴旋转90度，和-90度，ok！这样一个简单的立方体出来了
.cube .top{ -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(150px); } .cube .bottom{ -webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(150px); }
好的，现在一个立方体出现了，下一步就是让它转起来，然后再变形。。。后面更精彩
在下一篇的博客里，已经加入了在线预览功能，先谢主机屋的啦
