标签：opacity images tom 动画 center from city 立方体 位置
今天放上来的，是一个用css3制作的立方体+动画，效果如下。
整个效果都只用了html和css，没有一句js，其实起初是使用了js来给六个面的小方格们赋值，后来强迫症犯了，直接手动写上吧，这样一句js都没有，更干脆利落点。
如下为body内整体结构，一个类名为big的盒子内，放置六个ul，每个ul赋予不同的类名，标明了ul面所在的位置，这六个ul会作为立方体的六个面。
<div class="big"> <ul class="after"></ul> <ul class="left"></ul> <ul class="right"></ul> <ul class="top"></ul> <ul class="bottom"></ul> <ul class="before"></ul> </div>
下面为大盒子big的css样式，以及他要调用的css动画的样式。
.big { position: relative; width: 300px; height: 300px; margin: 150px auto 0; transform-style: preserve-3D; animation: animate 6s infinite; } @keyframes animate { 0% { transform: translate(-400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } 50% { transform: translate(400px) rotateX(0deg) rotateY(360deg) rotateZ(360deg); } 100% { transform: translate(-400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg); } }
下面为六个ul和li的统一样式，包括大小、定位、文字的一些样式等。
.big ul { width: 300px; height: 300px; position: absolute; font-size: 200px; text-align: center; line-height: 300px; color: #fff; } .big li { float: left; width: 80px; height: 80px; border-radius: 30%; margin: 10px; list-style: none; font-size: 50px; text-align: center; line-height: 80px; }
下面为每个ul通过transfrom属性，设置到不同的位置，以及内部li的背景颜色设置，这里只写出了left类的书写方式，其他五个面类似。
.left { transform: rotateY(-90deg) translateZ(150px); } .left li { background-color: #a9f; opacity: 0.9; }
整个效果写出来，还是比较简单的，只要明白各个命令的意思，剩下的就是组织一下逻辑而已，或许对于部分人来说，六个面的方位是个难点；另一部分人来说，动画的书写是难点；还有一部分人来说。。。编不出来了，感觉真没有什么难点，所以也无法推测其他人认为的难点是哪里
感觉，还是前面写的那个弹跳小球比较麻烦点。
标签：opacity images tom 动画 center from city 立方体 位置
原文地址：http://www.cnblogs.com/qianniaoyu/p/6789061.html
