CSS3 Bouncing Box

Note: This is a restored article from the original A thousand nodes blog (circa 2013).

Following up on my CSS3 Rotating Cube experiment, I decided to take things a step further by creating a bouncing 3D box using only CSS3 animations and transformations.

The HTML Structure

We'll start with a simple HTML structure:

<div class="scene">
  <div class="box-container">
    <div class="box">
      <div class="face front">Front</div>
      <div class="face back">Back</div>
      <div class="face right">Right</div>
      <div class="face left">Left</div>
      <div class="face top">Top</div>
      <div class="face bottom">Bottom</div>
    </div>
  </div>
  <div class="shadow"></div>
</div>

The CSS

Now for the CSS that creates the bouncing animation:

.scene {
  width: 300px;
  height: 300px;
  margin: 100px auto;
  perspective: 1000px;
  position: relative;
}

.box-container {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 50px;
  left: 100px;
  transform-style: preserve-3d;
  animation: bounce 3s infinite ease-in-out;
}

.box {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transform: translateZ(-50px);
  animation: rotate 3s infinite linear;
}

.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: rgba(50, 50, 240, 0.8);
  border: 2px solid #FFF;
  font-size: 20px;
  color: white;
  text-align: center;
  line-height: 100px;
}

.front  { transform: rotateY(0deg) translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { transform: rotateX(90deg) translateZ(50px); }
.bottom { transform: rotateX(-90deg) translateZ(50px); }

.shadow {
  position: absolute;
  width: 100px;
  height: 20px;
  background: rgba(0, 0, 0, 0.4);
  bottom: 0;
  left: 100px;
  border-radius: 50%;
  animation: shadow 3s infinite ease-in-out;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(150px);
    animation-timing-function: ease-in;
  }
}

@keyframes rotate {
  0% { transform: translateZ(-50px) rotateX(0deg) rotateY(0deg); }
  100% { transform: translateZ(-50px) rotateX(360deg) rotateY(360deg); }
}

@keyframes shadow {
  0%, 100% {
    transform: scale(1);
    opacity: 0.4;
  }
  50% {
    transform: scale(1.5);
    opacity: 0.8;
    filter: blur(5px);
  }
}

How It Works

This animation combines several CSS3 techniques:

1. Bouncing Motion: The bounce animation moves the box up and down using translateY.

2. 3D Rotation: The rotate animation spins the box on both X and Y axes simultaneously.

3. Dynamic Shadow: The shadow animation scales and changes opacity of the shadow to make it appear as if the box is casting a shadow on the ground.

4. Physics Simulation: The timing functions (ease-in and ease-out) simulate acceleration due to gravity.

5. 3D Perspective: The perspective property on the scene container creates the 3D effect.

Browser Compatibility

This animation works best in modern browsers that support CSS3 3D transforms:

• Chrome 12+
• Firefox 10+
• Safari 4+
• Opera 15+
• IE 10+

For older browsers, you can add vendor prefixes or consider a fallback animation.

Enhancing the Effect

You can enhance this animation in several ways:

1. Multiple Boxes: Create multiple boxes with different animation delays.

2. Material Effects: Add gradients and textures to the box faces.

3. Impact Animation: Add a slight "squish" effect when the box hits the ground.

4. Interactive Elements: Use JavaScript to allow user interaction (though this would defeat the purpose of a pure CSS solution).

Live Example

You can see a live example of this bouncing box on CodePen (note: you'll need to recreate this example since the original might not be available).

This experiment demonstrates the power of modern CSS for creating complex animations that previously would have required JavaScript or Flash.