纯CSS实现的3D倒计时效果

来源：互联网发布：java返回string 编辑：程序博客网时间：2024/05/20 15:38
纯CSS实现的3D倒计时效果，从0 到 9 ~
效果图：
css 纯CSS内容较多，现打包下载：http://pan.baidu.com/s/1c0Db7Ni
html:
结构图：
代码：
<div class="box">  <div class="axis">    <div class="layer">      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>    </div>    <div class="layer">      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>    </div>    <div class="layer">      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>      <div class="cube">        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>        <div class="side"></div>      </div>    </div>  </div></div>
0 0