To create a Color Changing Cube Loader with animated background colors, you can apply color changes to the cube’s faces along with the 3D rotation. Here’s how you can implement it using HTML and CSS.
Create index.html file and copy code and paste code our layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Changing Cube Loader by Mycodingtutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="cube-loader">
<div class="cube">
<div class="face front"></div>
<div class="face back"></div>
<div class="face left"></div>
<div class="face right"></div>
<div class="face top"></div>
<div class="face bottom"></div>
</div>
</div>
</body>
</html>Create style.css file and copy code and paste code our layout.
/* General Reset */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body, html {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: #f0f0f0;
}
/* Cube Loader Wrapper */
.cube-loader {
perspective: 800px;
}
/* Cube */
.cube {
position: relative;
width: 100px;
height: 100px;
transform-style: preserve-3d;
animation: rotate 3s infinite ease-in-out;
}
/* Faces of the Cube */
.face {
position: absolute;
width: 100px;
height: 100px;
background-color: #333;
border: 2px solid #fff;
opacity: 0.9;
animation: colorChange 3s infinite ease-in-out;
}
/* Front and Back Faces */
.front {
transform: translateZ(50px);
}
.back {
transform: rotateY(180deg) translateZ(50px);
}
/* Left and Right Faces */
.left {
transform: rotateY(-90deg) translateZ(50px);
}
.right {
transform: rotateY(90deg) translateZ(50px);
}
/* Top and Bottom Faces */
.top {
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
transform: rotateX(-90deg) translateZ(50px);
}
/* Cube Rotation Animation */
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
50% {
transform: rotateX(180deg) rotateY(180deg);
}
100% {
transform: rotateX(360deg) rotateY(360deg);
}
}
/* Color Change Animation */
@keyframes colorChange {
0% {
background-color: #e74c3c;
}
25% {
background-color: #3498db;
}
50% {
background-color: #2ecc71;
}
75% {
background-color: #f1c40f;
}
100% {
background-color: #e74c3c;
}
}
/* Responsive Design */
@media (max-width: 768px) {
.cube {
width: 80px;
height: 80px;
}
.face {
width: 80px;
height: 80px;
}
}
@media (max-width: 480px) {
.cube {
width: 60px;
height: 60px;
}
.face {
width: 60px;
height: 60px;
}
}Explanation
- 3D Cube Structure:
- The cube is composed of six faces (front, back, left, right, top, bottom). Each face is positioned using 3D transforms (translateZ and rotateX/rotateY).
- Cube Rotation Animation:
- The cube rotates continuously around both X and Y axes using a @keyframes rotate animation that applies a 360-degree rotation over 3 seconds.
- Color Change Animation:
- The background color of each cube face transitions through different colors using the @keyframes colorChange animation. This animation takes 3 seconds to complete and loops infinitely.
- The colors cycle from red (#e74c3c), to blue (#3498db), green (#2ecc71), yellow (#f1c40f), and back to red.
- Responsive Design:
- The size of the cube is adjusted for different screen sizes using media queries. The cube is reduced to 80px and 60px for tablet and mobile screens, respectively.
- This color-changing cube loader provides a dynamic 3D rotation and background color transition, making it visually engaging and responsive to different device sizes.
