玩转 css3 续
在上一篇博客里面用css3做了一个立方体，没想到阅读量竟然超过了700，很荣幸也很感动。本来这个css3动画已经做完了，但是一直是没有时间来写这篇博客，让大家久等了。闲话少叙，步入正题。
在这里首先要感谢主机屋提供的免费空间，真的很感谢！虽然注册的的时候验证多次没有通过，呵呵！在这里加了在线预览，文件上传到主机屋里。
让立方体转起来就要用到css3的一个新特性animation;这是玩动画必备的属性。google浏览器不支持但是有-webkit-animation替代。我说了我所做的都是以google浏览器为依托的，别的浏览器的兼容性暂不考虑。有了animation这一个属性还不够，玩过flash都知道动画的完场都是一帧一帧的对吧，css3里面有@keyframes ,这个属性就是规定动画的过程，可以理解成flash的帧。-webkit-@keyframes这个还是谷歌浏览器的私有属性替代@keyframes。这个属性后接动画名称比如
@-webkit-keyframes myfirst{
from {
-webkit-transform: rotateY(0deg);
}
to {
-webkit-transform: rotateY(-360deg);
}
}
这里面就是我定义的一个旋转动画，动画名称myfirst, from规定了动画的初始状态。这里面是绕y轴旋转角度是0。to是这阶段的动画结束状态。这里面是绕y轴旋转-360度，正负代表旋转的方向。当然动画的定义不都这一个规则可以用百分比来表示，上面的就可以写成这样
@-webkit-keyframes myfirst{ 0% { -webkit-transform: rotateY(0deg); } 100% { -webkit-transform: rotateY(-360deg); } }
css3强大之处就出来了，你可以给这个动画定义任何时候的动画状态，给每一帧都不同的变化都可以比如
@-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red; left:0px; top:0px;} 25% {background:yellow; left:200px; top:0px;} 50% {background:blue; left:200px; top:200px;} 75% {background:green; left:0px; top:200px;} 100% {background:red; left:0px; top:0px;} }
这个就是定义动画 myfirst在不同阶段的动画效果，这个你可以根据喜好自定义行为。这里就不多说了。动画定义玩了，就该给动画定义个运行时间吧，有个animation-duration规定了动画的播放时长，但是我们是要让这个动画立方体一直旋转下去，怎么办？css3有animation-direction这个属性定义是否应该轮流反向播放动画；语法animation-direction: normal|alternate;其中normal是动画只播放一个周期，而alternate就是我们要找的，它规定了动画将一直反复的播放下去。好了既然有了这个就好办了，下一步把这个动画加到每一个图片里是不是就ok了呢，好的我们就在上一篇博客的基础上加进动画吧
.inBox{ width:300px; height:300px; -webkit-border-radius:25px; opacity: 0.8; position: absolute; -webkit-animation:myfirst 15s infinite linear ; }
运行一下，我了个擦，结果出现了令人瞠目结舌的效果，立方体的每一个面都飞了起来（这里面不能演示，我还不会演示，我截个图片，图片是我媳妇，大家勿喷啊）
<html lang="en"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>css3立体盒子</title> <meta name="description" content="" /> <meta name="author" content="yangheng" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <style rel="stylesheet"> *{ margin:0; padding:0; } html>body{ text-align:center; height:100%; width:100%; text-align:center; } body>#wrap{ width:100%; height:100%; } #wrap{ height:100%; margin:auto auto; border:1px solid red; position:relative; -webkit-perspective: 800px; } #container{ margin: 200px auto; width:600px; height:600px; padding:50px 100px; -webkit-transform-style: preserve-3d; -webkit-transition:-webkit-transform 3s; -webkit-perspective-origin: 0% 200px; } @-webkit-keyframes myfirst{ from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } .cube{ -webkit-transform-style: preserve-3d; -webkit-transition:-webkit-transform 2s; } .inBox{ -webkit-transform-style: preserve-3d; width:300px; height:300px; -webkit-transition: -webkit-transform 2s , opacity 2s; -webkit-border-radius:25px; opacity: 0.8; position: absolute; } img{ display:block; -webkit-border-radius:5px; -webkit-animation:myfirst 15s infinite linear ; width:100%; height:100%; } .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); } .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); } </style> </head> <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> </html>
效果竟然是竟然的每个图片都是绕着自己中心旋转，我的立方体呢，没了！怎么办。。。。；找到立方体的中心，这个css3我好像还真没看到啊，车到山前必有路，容器里面再嵌套一个舞台，对，让这个舞台旋转，从而带动整个立方体旋转，ok,动手做起来，
<div id="wrap"> <div id="container" class="cube backface"> <div id="shap"> <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> </div>
新建一个舞台，这个舞台包裹着立方体。ok，把动画加到这个舞台上面，同样要加的还有舞台的3d旋转而不是2d -webkit-transform-style: preserve-3d;代码如下
#shap{ position: relative; margin: 0 auto; margin-top:200px; height: 300px; width: 300px; -webkit-transform-style: preserve-3d; } #shap{ -webkit-animation:myfirst 15s infinite linear ; }
ok,在运行一下，效果出来了，大家看一下
看到了吧，这个3d旋转的效果就出来了！舞台带动带动整个的立方体旋转，而且中心没有改变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame Remove this if you use the .htaccess --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <title>css3立体盒子</title> <meta name="description" content="" /> <meta name="author" content="yangheng" /> <meta name="viewport" content="width=device-width; initial-scale=1.0" /> <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="apple-touch-icon" href="/apple-touch-icon.png" /> <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> <style rel="stylesheet"> *{ margin:0; padding:0; } html>body{ text-align:center; height:100%; width:100%; text-align:center; } body>#wrap{ width:100%; height:100%; } #wrap{ height:100%; margin:auto auto; border:1px solid red; position:relative; -webkit-perspective: 800px; -webkit-perspective-origin: 50% 400px; } #container{ width:100%; height:600px; -webkit-transform-style: preserve-3d; -webkit-transition:-webkit-transform 3s; } #shap{ position: relative; margin: 0 auto; margin-top:200px; height: 300px; width: 300px; -webkit-transform-style: preserve-3d; } #shap{ -webkit-animation:myfirst 15s infinite linear ; } @-webkit-keyframes myfirst{ from { -webkit-transform: rotateY(0deg); } to { -webkit-transform: rotateY(-360deg); } } .cube{ -webkit-transform-style: preserve-3d; -webkit-transition:-webkit-transform 2s; } .inBox{ -webkit-transform-style: preserve-3d; width:300px; height:300px; -webkit-transition: -webkit-transform 2s , opacity 2s; -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) 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); } .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); } </style> </head> <body> <div id="wrap"> <div id="container" class="cube backface"> <div id="shap"> <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> </div> </body> </html>
接下来就是做一个效果切换，打乱原来的效果，立方体然后拼成另一个3d效果，而且还有动画效果更平滑！我尽快把博客更新上来！
