四角がクルクル回るローダーの実装

はじめに

ウェブサイトの読み込み中に表示されるローディングアニメーションは、ユーザーに待ち時間を感じさせにくくする効果があります。

今回は、四角形がX軸とY軸の両方で3D回転するローダーをCSSだけで実装する方法を紹介します。

完成デモ

四角形がX軸とY軸で順番に回転し、立体的にクルクル回ります。

プレビュー

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);
  }
}

仕組みの解説

このアニメーションは、@keyframesで4つのステップに分けて回転を制御しています。

**0% → 25%**: X軸で180度回転（手前に倒れる）
**25% → 50%**: Y軸で180度回転（横に回転）
**50% → 75%**: X軸を元に戻す（起き上がる）
**75% → 100%**: Y軸でさらに180度回転し、元に戻る

perspective(120px)により、回転時に奥行きが生まれ、立体的に見えます。

HTMLコード

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

CSSコード

.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);
  }
}

各プロパティの役割

perspective()

transform内で使用し、3D空間の奥行きを設定します。値が小さいほど回転が劇的に見えます。

rotateX() / rotateY()

それぞれX軸（水平軸）とY軸（垂直軸）を中心に回転させます。組み合わせることで複雑な3D回転が可能です。

ease-in-out

アニメーションの開始と終了をゆっくりにし、中間を速くします。自然な動きになります。

infinite

アニメーションを無限にループさせます。ローダーには必須の設定です。

カラーバリエーション

背景色を変えることで、様々な雰囲気のローダーを作成できます。

プレビュー

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);
  }
}

カスタマイズのヒント

このローダーは簡単にカスタマイズできます。

**サイズ変更**
widthとheightを変えるだけでOKです。

**速度調整**
animation-durationを変更します（例：1s で高速、3s でゆっくり）。

**角丸**
border-radiusを追加すると、角が丸くなります。50%にすると円になります。

**複数配置**
animation-delayをずらすことで、波のような動きを作れます。

まとめ

CSS 3D Transformを使った回転ローダーは、シンプルなコードで印象的なアニメーションを実現できます。

perspectiveとrotateX/rotateYの組み合わせで立体的な動きを作り、ユーザーの待ち時間を視覚的に楽しくしましょう。

JavaScriptを使わずCSSだけで完結するため、パフォーマンスにも優れています。