Rate this post

In the world of web design, creating eye-catching visual effects is key to engaging users and making your website stand out. Today, we’ll dive into an intriguing example of this: a rotating cube with ambient light effects, all achieved with pure HTML and CSS. This effect combines 3D transformations, animations, and advanced CSS techniques to produce a dynamic and visually appealing result.

Table of Contents

The HTML Structure of ambient light effect animation

Here’s the basic HTML structure of our cube effect:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ambient light effects</title>
</head>
<body>
    <div class="cube">
        <div class="top"></div>
        <div>
          <span style="--i: 0"></span>
          <span style="--i: 1"></span>
          <span style="--i: 2"></span>
          <span style="--i: 3"></span>
        </div>
      </div>
</body>
</html>

The cube itself is wrapped in a div with the class .cube. Inside, there’s a .top element and four <span> elements for the sides of the cube.

The CSS Breakdown

Now, let’s dive into the CSS magic that brings this cube to life.

1.Resetting Margins and Padding

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

This snippet ensures a consistent appearance across different browsers by removing default margins and padding and using border-box for element sizing.

2. Centering the Cube

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #050505;
}

Here, we use Flexbox to center the .cube both vertically and horizontally. The min-height: 100vh ensures the body covers the full viewport height, and the dark background color (#050505) creates a dramatic effect.

3.Creating the Cube

.cube {
  position: relative;
  width: 300px;
  height: 300px;
  transform-style: preserve-3d;
  animation: animate 4s linear infinite;
}

The .cube class defines the size and the 3D transformation context for the cube. transform-style: preserve-3d ensures that the cube’s children are rendered in 3D space. The animation property applies a continuous rotation to the cube.

4. Animating the Cube

@keyframes animate {
  0% {
    transform: rotateX(-30deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(-30deg) rotateY(360deg);
  }
}

The @keyframes animate rule creates a smooth, infinite rotation effect around the Y-axis, giving the illusion of a rotating cube.

5. Styling the Cube Faces

.cube div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.cube div span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#151515, #00ec00);
  transform: rotateY(calc(90deg * var(--i))) translateZ(150px);
}

The .cube div element serves as a container for the cube’s sides, with each <span> representing a side. The gradient background gives the cube a subtle glow. The transform property positions each face correctly using rotateY and translateZ.

6. The Top Face and Ambient Light Effect

.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: #222;
  transform: rotateX(90deg) translateZ(150px);
}
.top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 300px;
  height: 300px;
  background: #0f0;
  transform: translateZ(-380px);
  filter: blur(20px);
  box-shadow: 0 0 120px rgba(89, 126, 89, 0.2), 0 0 200px rgba(0, 255, 0, 0.4),
    0 0 300px rgba(0, 255, 0, 0.6), 0 0 400px rgba(0, 255, 0, 0.8),
    0 0 500px rgba(0, 255, 0, 1);
}

The .top class styles the top face of the cube with a dark background and a green ambient light effect. The ::before pseudo-element creates the light effect with a combination of background, filter, and box-shadow properties. This gives the impression of a glowing, green light source behind the cube.

Also get updated with us and keep learning with us.

Conclusion

This CSS-only cube effect showcases the power and flexibility of CSS3 in creating complex visual effects without relying on JavaScript or additional graphics. By combining 3D transforms, animations, and creative use of CSS properties, you can craft stunning, interactive elements that enhance the visual appeal of your web projects.

Feel free to experiment with different colors, sizes, and animations to make this effect uniquely yours. Happy coding!

0 0 votes

Course Rating