纯CSS炫酷3D旋转立方体进度条特效

在网站制作中，提高用户体验度是一项非常重要的任务。一个创意设计不但能吸引用户的眼球，还能大大的提高用户的体验。在这篇文章中，我们将大胆的将前面所学的3D立方体和进度条结合起来，制作一款纯CSS3的3D旋转立方体进度条效果。

在线预览   源码下载

在网站制作中，提高用户体验度是一项非常重要的任务。一个创意设计不但能吸引用户的眼球，还能大大的提高用户的体验。在这篇文章中，我们将大胆的将前面所学的3D立方体和进度条结合起来，制作一款纯CSS3的3D旋转立方体进度条效果。

我们先来预览一下效果：

HTML结构

<div class="wrap">
  <div class="cube">
    <div class="front">
      <div class="progress">Loading ...</div>
    </div>
    <div class="back">
      <div class="progress">Loading ...</div>
    </div>
    <div class="top">
      <div class="progress">Loading ...</div>
    </div>
    <div class="bottom">
      <div class="progress">Loading ...</div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
  </div>
</div>

　　

这个3D立方体进度条的HTML结构和原来我们讲述的简单3D立方体稍有不同。因为我们还要制作进度条的动画，所以多包装了一层div。class为progress的div是用于制作进度条动画的，它们位于上下和前后4个面中。当我们设置新的进度条值时，就使用这4个面来制作进度条动画。

CSS样式：

.wrap {
  perspective: 1000px;
  perspective-origin: 50% 50%;

  /*  Change this to adjust the 3d bar tilting */
  transform: rotateZ(0.01turn) rotateY(0.01turn);
}
.progress
{
  height: 100%;
  width: 0%;
  padding: 0px;
  transition: width 2s ease;

  overflow: visible;
  text-align: center;
  color: #000;
  font-family: verdana;
  font-size: 20px;
  white-space: nowrap;
  line-height: 45px;

  border-right: solid 2px #444;
  background-size: 50px 50px;
  /* Blue stripes */
  background-image: linear-gradient(135deg,#3399ff 25%,#99ccff 25%,#99ccff 50%, #3399ff 50%, #3399ff 75%,#99ccff 75%,#99ccff 100%);
  animation: bganim 1s linear 2s infinite;
}
@keyframes bganim {
  to { background-position: 50px;}
}
.cube {
  margin: auto;
  position: relative;
  height: 50px;
  width: 500px;
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube > div {
  position: absolute;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
  border: solid 1px #eee;
  background-size: 50px 50px;
  /* Grey stripes */
  background-image: linear-gradient(135deg,#ddd 25%,#eee 25%,#eee 50%, #ddd 50%, #ddd 75%,#eee 75%,#eee 100%);
  animation: bganim 1s linear 2s infinite;
}
.cube > .left,.cube > .right{
  height: 50px;
  width: 50px;
}

.front {
  transform: translateZ(25px);
}

.back {
  transform: translateZ(-25px) rotateX(180deg);
}

.top {
  transform: rotateX(-270deg) translateY(-25px);
  transform-origin: top center;
}

.bottom {
  transform: rotateX(270deg) translateY(25px);
  transform-origin: bottom center;
}

.left {
  transform: rotateY(270deg) translateX(-25px);
  transform-origin: center left;
}
.right {
  transform: rotateY(-270deg) translateX(25px) translateZ(450px);
  transform-origin: top right;
}

/* Rotating the 3d rectangle */
@keyframes rotate {
  100%{
    transform: rotateX(1turn);
  }
}

　　

浏览器兼容

这个进度条特效可以工作在除了IE浏览器之外的所有现代浏览器。IE浏览器不支持preserve-3d属性，因此所有的面都被渲染为平面，看起来就像是同一个面。最易上面的代码中没有使用浏览器厂商的前缀，你应该为Webkit内核的浏览器添加-webkit-前缀，以及其他浏览器添加相应的前缀。

via：http://www.w2bc.com/Article/25385