3D Flip Loader Animation

Introduction

Loading animations displayed during website loading help reduce the perception of wait time for users.

In this article, we'll show you how to implement a loader where a square rotates in 3D on both X and Y axes using only CSS.

Final Demo

The square rotates on X and Y axes sequentially, creating a 3D spinning effect.

Preview

HTML

<div class="demo-loader-container">
  <div class="demo-loader-box"></div>
</div>

CSS

.demo-loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2rem 0;
}

.demo-loader-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: demo-flip 2s ease-in-out infinite;
}

@keyframes demo-flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
  }
}

How It Works

This animation controls rotation in 4 steps using @keyframes.

**0% → 25%**: Rotate 180 degrees on X-axis (falls forward)
**25% → 50%**: Rotate 180 degrees on Y-axis (rotates sideways)
**50% → 75%**: Reset X-axis (rises back up)
**75% → 100%**: Rotate another 180 degrees on Y-axis, returning to start

perspective(120px) creates depth during rotation, making it appear 3D.

HTML Code

<div class="loader-container">
  <div class="loader-box"></div>
</div>

CSS Code

.loader-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loader-box {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  animation: flip 2s ease-in-out infinite;
}

@keyframes flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
  }
}

Role of Each Property

perspective()

Used within transform to set 3D space depth. Smaller values make rotation more dramatic.

rotateX() / rotateY()

Rotate around X-axis (horizontal) and Y-axis (vertical) respectively. Combining them enables complex 3D rotation.

ease-in-out

Slows down animation start and end while speeding up the middle. Creates natural movement.

infinite

Loops the animation infinitely. Essential for loaders.

Color Variations

By changing background colors, you can create loaders with various moods.

Preview

HTML

<div class="demo-loader-variants">
  <div class="demo-loader-box demo-loader-box--green"></div>
  <div class="demo-loader-box demo-loader-box--orange"></div>
  <div class="demo-loader-box demo-loader-box--pink"></div>
</div>

CSS

.demo-loader-variants {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: 2rem 0;
}

.demo-loader-box {
  width: 50px;
  height: 50px;
  animation: demo-flip 2s ease-in-out infinite;
}

.demo-loader-box--green {
  background: linear-gradient(135deg, #00b894 0%, #00a885 100%);
  animation-delay: 0s;
}

.demo-loader-box--orange {
  background: linear-gradient(135deg, #fdcb6e 0%, #e17055 100%);
  animation-delay: 0.3s;
}

.demo-loader-box--pink {
  background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
  animation-delay: 0.6s;
}

@keyframes demo-flip {
  0% {
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
  }
  25% {
    transform: perspective(120px) rotateX(-180deg) rotateY(0deg);
  }
  50% {
    transform: perspective(120px) rotateX(-180deg) rotateY(-180deg);
  }
  75% {
    transform: perspective(120px) rotateX(0deg) rotateY(-180deg);
  }
  100% {
    transform: perspective(120px) rotateX(0deg) rotateY(-360deg);
  }
}

Customization Tips

This loader is easy to customize.

**Size Adjustment**
Just change width and height.

**Speed Adjustment**
Modify animation-duration (e.g., 1s for fast, 3s for slow).

**Rounded Corners**
Add border-radius for rounded corners. Use 50% for a circle.

**Multiple Loaders**
Offset animation-delay to create wave-like movements.

Summary

A rotating loader using CSS 3D Transform achieves impressive animation with simple code.

Combine perspective with rotateX/rotateY to create 3D movement that makes wait times visually engaging.

Since it uses only CSS without JavaScript, it's also excellent for performance.