In website production, 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 cube and progress bar we learned earlier to create a pure CSS3 3D rotating cube progress bar effect.
Online preview Source code download
In website production, 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 cube and progress bar we learned earlier to create a pure CSS3 3D rotating cube progress bar effect.
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>
This 3D The HTML structure of the cube progress bar is slightly different from the simple 3D cube we originally described. Because we also need to animate the progress bar, we wrap it with an extra layer of div. The divs with class progress are used to animate progress bars. They are located in the upper, lower and front and back sides. When we set a new progress bar value, we use these four faces to animate the progress bar.
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 browsers other than IE All modern browsers except . Internet Explorer does not support the preserve-3d attribute, so all faces are rendered as flat surfaces and appear to be the same face. It is easiest to use the browser manufacturer's prefix in the above code. You should add the -webkit- prefix for browsers with Webkit core, and add corresponding prefixes for other browsers.
via: http://www.w2bc.com/Article/25385
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
