Pure CSS Cool 3D rotating cube progress bar effect, css Cool 3d cube

Pure CSS Cool 3D rotating cube progress bar effect, css Cool 3d cube

In website creation, improving user experience is a very important task. A creative design can not only attract the user's attention, but also greatly improve the user experience. In this article, we will boldly combine the 3D cubes we have learned with the progress bar to create a pure CSS3 3D rotating cube progress bar.

Download Online Preview source code

In website creation, improving user experience is a very important task. A creative design can not only attract the user's attention, but also greatly improve the user experience. In this article, we will boldly combine the 3D cubes we have learned with the progress bar to create a pure CSS3 3D rotating cube progress bar.

Let's preview the effect first:

HTML Structure

<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>                  

　　

The HTML structure of the 3D cube progress bar is slightly different from the simple 3D cube we described previously. Because we want to make an animation of the progress bar, a div is encapsulated. The div whose class is progress is used to make progress bar animations. They are located in the upper and lower sides and the front and back sides. When we set a new progress bar value, we can use these four faces to create a progress bar animation.

CSS style:

.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);  }}                

　　

Browser compatibility

This progress bar effect can work in all modern browsers except IE. IE does not support preserve-3d properties, so all faces are rendered as planes that look like the same surface. The above Code does not use the prefix of the browser vendor. You should add the-Webkit-prefix for the webkit kernel browser and the corresponding prefix for other browsers.

Via: http://www.w2bc.com/Article/25385