Back
Learn how to build a sophisticated three-dimensional loader with folding cube faces using CSS transforms and perspective.
<div class="folding-cube">
<div class="cube-face face-1"></div>
<div class="cube-face face-2"></div>
<div class="cube-face face-3"></div>
<div class="cube-face face-4"></div>
</div>
.folding-cube {
position: relative;
width: 60px;
height: 60px;
transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(25deg);
animation: rotate 4s infinite ease-in-out;
}
Next, we define the common properties for all cube faces. These are positioned absolutely within the cube container and given a semi-transparent emerald green color with a darker border for definition. The opacity setting allows us to maintain some visibility through the cube as it rotates.
.cube-face {
position: absolute;
width: 100%;
height: 100%;
background: #059669;
opacity: 0.8;
border: 2px solid #065F46;
}
Now we position each face of the cube in 3D space and assign individual animations. We translate each face 30px along its appropriate axis to create a cube with dimensions of 60px × 60px × 60px.
The front face (face-1) is positioned to face the viewer initially and will fold along its bottom edge.
.face-1 {
transform: translateZ(30px);
animation: fold-1 4s infinite ease-in-out;
}
The right face (face-2) is rotated 90 degrees around the Y-axis and given a slightly lighter green color. It will fold after the front face completes its fold.
.face-2 {
transform: rotateY(90deg) translateZ(30px);
background: #10B981;
animation: fold-2 4s infinite ease-in-out;
}
The back face (face-3) is rotated 180 degrees around the Y-axis and given an even lighter green color. It folds third in the sequence.
.face-3 {
transform: rotateY(180deg) translateZ(30px);
background: #34D399;
animation: fold-3 4s infinite ease-in-out;
}
The left face (face-4) is rotated -90 degrees around the Y-axis and given the lightest green color. It folds last in the sequence.
.face-4 {
transform: rotateY(-90deg) translateZ(30px);
background: #6EE7B7;
animation: fold-4 4s infinite ease-in-out;
}
The rotation animation for the entire cube creates a smooth, continuous motion that shows different sides of the cube as it turns. The animation runs over 4 seconds and uses carefully selected keyframes to create smooth transitions with pauses at key points.
@keyframes rotate {
0%, 10% { transform: rotateX(-25deg) rotateY(25deg); }
40%, 60% { transform: rotateX(-25deg) rotateY(205deg); }
90%, 100% { transform: rotateX(-25deg) rotateY(385deg); }
}
Each face has its own folding animation that uses rotateX transformations to create the folding effect. The animations are precisely timed to create a sequential folding pattern that works with the cube's rotation.
Here's the animation for the front face, which folds first:
@keyframes fold-1 {
0%, 10% { transform: translateZ(30px); }
20% { transform: rotateX(-90deg) translateZ(30px); }
30%, 70% { transform: rotateX(-180deg) translateZ(30px); }
80% { transform: rotateX(-270deg) translateZ(30px); }
90%, 100% { transform: rotateX(-360deg) translateZ(30px); }
}
The subsequent face animations follow a similar pattern but are offset in time to create the sequential folding effect. Each face appears to wait its turn before folding, creating an intricate choreography of movement.
For example, the right face (face-2) starts folding at the 40% mark of the animation cycle:
@keyframes fold-2 {
0%, 30% { transform: rotateY(90deg) translateZ(30px); }
40% { transform: rotateY(90deg) rotateX(-90deg) translateZ(30px); }
50%, 80% { transform: rotateY(90deg) rotateX(-180deg) translateZ(30px); }
90% { transform: rotateY(90deg) rotateX(-270deg) translateZ(30px); }
100% { transform: rotateY(90deg) rotateX(-360deg) translateZ(30px); }
}
The container in which this loader is placed needs to have the perspective property set to create a proper 3D effect:
display: flex; justify-content: center; align-items: center; height: 100%; background-color: #ECFDF5; perspective: 600px;
This folding cube loader offers several unique advantages as a loading indicator:
- Visual sophistication: The 3D transforms and sequential folding create a complex, visually interesting animation that demonstrates technical sophistication.
- Mesmerizing effect: The continuous, rhythmic motion captures attention and effectively communicates an active process while potentially reducing perceived wait time.
- Depth and dimension: Unlike flat loaders, this 3D animation creates a sense of physical space and tangible objects, adding richness to the interface.
- Brand expression: The distinctive animation offers opportunities for brand expression through color and timing adjustments.
- Modern technology showcase: The use of advanced CSS 3D transforms signals a modern, technically advanced application, particularly suitable for innovative or cutting-edge products.
This sophisticated animation transforms waiting time into a visually engaging experience while clearly communicating that a process is underway.
<div class="folding-cube">
<div class="cube-face face-1"></div>
<div class="cube-face face-2"></div>
<div class="cube-face face-3"></div>
<div class="cube-face face-4"></div>
</div>
<style>
.folding-cube {
position: relative;
width: 60px;
height: 60px;
transform-style: preserve-3d;
transform: rotateX(-25deg) rotateY(25deg);
animation: rotate 4s infinite ease-in-out;
}
.cube-face {
position: absolute;
width: 100%;
height: 100%;
background: #059669;
opacity: 0.8;
border: 2px solid #065F46;
}
.face-1 {
transform: translateZ(30px);
animation: fold-1 4s infinite ease-in-out;
}
.face-2 {
transform: rotateY(90deg) translateZ(30px);
background: #10B981;
animation: fold-2 4s infinite ease-in-out;
}
.face-3 {
transform: rotateY(180deg) translateZ(30px);
background: #34D399;
animation: fold-3 4s infinite ease-in-out;
}
.face-4 {
transform: rotateY(-90deg) translateZ(30px);
background: #6EE7B7;
animation: fold-4 4s infinite ease-in-out;
}
@keyframes rotate {
0%, 10% { transform: rotateX(-25deg) rotateY(25deg); }
40%, 60% { transform: rotateX(-25deg) rotateY(205deg); }
90%, 100% { transform: rotateX(-25deg) rotateY(385deg); }
}
@keyframes fold-1 {
0%, 10% { transform: translateZ(30px); }
20% { transform: rotateX(-90deg) translateZ(30px); }
30%, 70% { transform: rotateX(-180deg) translateZ(30px); }
80% { transform: rotateX(-270deg) translateZ(30px); }
90%, 100% { transform: rotateX(-360deg) translateZ(30px); }
}
@keyframes fold-2 {
0%, 30% { transform: rotateY(90deg) translateZ(30px); }
40% { transform: rotateY(90deg) rotateX(-90deg) translateZ(30px); }
50%, 80% { transform: rotateY(90deg) rotateX(-180deg) translateZ(30px); }
90% { transform: rotateY(90deg) rotateX(-270deg) translateZ(30px); }
100% { transform: rotateY(90deg) rotateX(-360deg) translateZ(30px); }
}
@keyframes fold-3 {
0%, 50% { transform: rotateY(180deg) translateZ(30px); }
60% { transform: rotateY(180deg) rotateX(-90deg) translateZ(30px); }
70%, 90% { transform: rotateY(180deg) rotateX(-180deg) translateZ(30px); }
100% { transform: rotateY(180deg) rotateX(-360deg) translateZ(30px); }
}
@keyframes fold-4 {
0%, 70% { transform: rotateY(-90deg) translateZ(30px); }
80% { transform: rotateY(-90deg) rotateX(-90deg) translateZ(30px); }
90% { transform: rotateY(-90deg) rotateX(-180deg) translateZ(30px); }
100% { transform: rotateY(-90deg) rotateX(-360deg) translateZ(30px); }
}
</style>
Thank you for reading this article.
Comments