アニメーション

CSSだけで作る！ネオンに光る3Dキューブ回転アニメーション

投稿日 2026/01/23

更新日 2026/1/19

3D表現って「Three.jsが必要そう」と思われがちですが、実はCSSだけでもかなり雰囲気のある演出が作れます。

このコードは、ネオンブルーに発光する“立方体（キューブ）”を、preserve-3d＋perspectiveで立体として成立させ、ゆっくり回転させるアニメーションです。

背景のアクセント、MV（メインビジュアル）のワンポイント、デモページの飾りにちょうどいい系です。

Preview プレビュー

Code コード

HTML

<div class="bg-glow"></div>

<div class="animation-container">
    <div class="cube">
        <div class="cube-face front">FRONT</div>
        <div class="cube-face back">BACK</div>
        <div class="cube-face right">RIGHT</div>
        <div class="cube-face left">LEFT</div>
        <div class="cube-face top">TOP</div>
        <div class="cube-face bottom">BOTTOM</div>
    </div>
</div>

CSS

body {
    background-color: #050505;
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    font-family: 'Arial Black', sans-serif;
}

.animation-container {
    width: 200px;
    height: 200px;
    perspective: 1000px;
}

.cube {
    width: 100%;
    height: 100%;
    position: relative;
    transform-style: preserve-3d;
    animation: cubeRotate 10s infinite linear;
}

.cube-face {
    position: absolute;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* 文字の設定: 純白 */
    color: #ffffff;
    font-weight: bold;
    font-size: 28px;
    text-transform: uppercase;
    /* 文字を白く光らせて際立たせる */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.8), 0 0 20px rgba(255, 255, 255, 0.4);
    
    backface-visibility: visible;
    
    /* 背景グラデーション (#3624ff から #ff3c3c) */
    background: linear-gradient(135deg, rgba(54, 36, 255, 0.25), rgba(255, 60, 60, 0.25));
    
    /* 枠線グラデーション */
    border: 3px solid;
    border-image: linear-gradient(135deg, #3624ff, #ff3c3c) 1;
    
    /* 外側と内側の光（青と赤の混合） */
    box-shadow: 0 0 20px rgba(54, 36, 255, 0.4), 
                inset 0 0 20px rgba(255, 60, 60, 0.4);
}

/* 3D 配置設定 */
.front  { transform: rotateY(0deg) translateZ(100px); }
.back   { transform: rotateY(180deg) translateZ(100px); }
.right  { transform: rotateY(90deg) translateZ(100px); }
.left   { transform: rotateY(-90deg) translateZ(100px); }
.top    { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }

/* 回転アニメーション */
@keyframes cubeRotate {
    0% { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* 背景にうっすらと光を配置 */
.bg-glow {
    position: absolute;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(54, 36, 255, 0.1) 0%, rgba(255, 60, 60, 0.1) 50%, transparent 70%);
    filter: blur(80px);
    z-index: -1;
}