What is CSS transform-style: preserve-3d and how does it work?

transform-style: preserve-3d tells the browser that child elements should exist in 3D space rather than being flattened onto a 2D plane. Without it, all transforms on child elements (like rotating cube faces) would appear flat. In NEXUS 3D, both the .scene container and each .cube element use transform-style: preserve-3d so the six faces of each cube maintain their 3D positions as the parent rotates.

Does this 3D CSS project work on mobile browsers?

Yes. NEXUS 3D includes a responsive @media (max-width: 768px) breakpoint. On mobile, the scene rotation animation is disabled (animation: none) to save battery and improve performance, cube and face sizes shrink to 120px, the headline scales to 4rem, and cube face Z-offsets adjust to 60px to match the smaller size. The layout remains centered and visually impressive on all screen sizes.

Can I use this NEXUS 3D template for a real product or startup landing page?

Yes. Under CC BY 4.0 you may use NEXUS 3D in commercial projects and real product landing pages with attribution to Coodeverse. Replace the NEXUS headline with your brand name, update the CTA buttons with real links, change the --accent and --purple CSS variables to your brand colors, and add sections below the hero for features, pricing, and contact.

Where can I find more free HTML CSS 3D and animation projects?

Browse the full collection at coodeverse.com/projects — Gold Circuit Board Background, VORTEX Interactive Canvas, Luxury Business Card, INterior Design Landing Page, Cosmos Star Animation, Holographic Login and more. All 100% free with complete source code.

Pure CSS 3D Cube Animation – Free HTML CSS

NEXUS 3D – Free Pure CSS 3D Rotating Glassmorphism Cubes Landing Page

NEXUS 3D is a free, copy-paste ready pure CSS 3D landing page built with only HTML and CSS — zero JavaScript required. It features four rotating glassmorphism cubes built using CSS transform-style: preserve-3d and perspective: 1500px, a full scene rotation animation that spins 360° over 30 seconds using @keyframes rotateScene, six individually positioned cube faces using CSS translateZ and rotateY/rotateX transforms, six floating cyan particle dots rising with CSS @keyframes floatParticle, a gradient glow headline with CSS -webkit-background-clip: text and a pulsing drop-shadow animation, and neon CTA buttons with hover lift effects.

This project is the definitive free demonstration of advanced CSS 3D transforms. It teaches the complete CSS 3D cube technique — the exact face positioning formulas, transform-style: preserve-3d inheritance, backdrop-filter glassmorphism on 3D faces, and scene-level rotation — all without a single line of JavaScript. The mobile breakpoint responsibly disables the scene rotation animation on small screens using @media (max-width: 768px) for performance.

What's Included in the Download

4 glassmorphism 3D cubes (CSS)
6 faces per cube (CSS transform)
Scene rotation 360° @keyframes
CSS perspective: 1500px 3D depth
transform-style: preserve-3d
backdrop-filter glass cube faces
Floating cube animation (translateZ)
6 CSS-only floating particles
Gradient glow headline (Orbitron)
Pulsing drop-shadow title animation
Neon CTA buttons with hover lift
Mobile responsive (scene disabled)
Single self-contained HTML file
CC BY 4.0 — free for commercial use

How CSS 3D Cubes Work (The Exact Technique)

Each .cube has transform-style: preserve-3d so children maintain 3D positions. The six faces are positioned using: .front { transform: translateZ(90px); }, .back { transform: translateZ(-90px) rotateY(180deg); }, .right { transform: rotateY(90deg) translateZ(90px); }, .left { transform: rotateY(-90deg) translateZ(90px); }, .top { transform: rotateX(90deg) translateZ(90px); }, .bottom { transform: rotateX(-90deg) translateZ(90px); }. The Z offset (90px) equals exactly half the cube's width (180px ÷ 2). On mobile, cube sizes shrink to 120px so the offset changes to 60px.

How to Customize Colors and Speed

Edit the CSS custom properties: --accent: #00f5ff controls the cyan glow color on cube faces, particles, and button borders. --purple: #8b5cf6 controls the gradient end color. --bg: #0d0b1f is the deep space background. Change animation: rotateScene 30s infinite linear duration to spin faster (10s) or slower (60s). Add more cubes by duplicating a .cube div and positioning it with custom top/left values and a new animation-delay.

Best Use Cases

NEXUS 3D is ideal for: tech startup landing pages, SaaS product hero sections, AI / blockchain / fintech brand sites, developer portfolio hero animations, game studio websites, cybersecurity firm landing pages, CSS 3D tutorial demos, and any project that needs a visually stunning 3D effect with zero JavaScript overhead.

License

Released under Creative Commons Attribution 4.0 International (CC BY 4.0). Free for personal and commercial use with attribution to Coodeverse.

Source Code

HTML

CSS

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>NEXUS - Pure CSS 3D Landing</title>
  <link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Inter:wght@400;600;700&display=swap" rel="stylesheet">
  <style>
    :root {
      --bg: #0d0b1f;
      --card: #14122b;
      --accent: #00f5ff;
      --purple: #8b5cf6;
      --glow:  rgba(0,245,255,0.4);
    }
    * { margin:0; padding:0; box-sizing:border-box; }
    body {
      font-family: 'Inter', sans-serif;
      background: var(--bg);
      color: #e0e0ff;
      overflow-x: hidden;
      perspective: 1500px;
      height: 100vh;
    }

    /* Floating 3D Scene */
    .scene {
      position: absolute;
      top: 0; left: 0; width: 100%; height: 100%;
      transform-style: preserve-3d;
      animation: rotateScene 30s infinite linear;
    }
    @keyframes rotateScene {
      0% { transform: rotateY(0deg) rotateX(5deg); }
      100% { transform: rotateY(360deg) rotateX(5deg); }
    }

    .cube {
      position: absolute;
      width: 180px; height: 180px;
      transform-style: preserve-3d;
      top: 50%; left: 50%;
      animation: float 12s infinite ease-in-out;
    }
    @keyframes float {
      0%, 100% { transform: translateY(-20px) translateZ(0); }
      50% { transform: translateY(20px) translateZ(100px); }
    }

    .face {
      position: absolute;
      width: 180px; height: 180px;
      background: linear-gradient(135deg, rgba(0,245,255,0.2), rgba(139,92,246,0.3));
      border: 1px solid rgba(0,245,255,0.4);
      backdrop-filter: blur(10px);
      box-shadow: 0 0 40px var(--glow);
    }
    .front  { transform: translateZ(90px); }
    .back   { transform: translateZ(-90px) rotateY(180deg); }
    .right  { transform: rotateY(90deg) translateZ(90px); }
    .left   { transform: rotateY(-90deg) translateZ(90px); }
    .top    { transform: rotateX(90deg) translateZ(90px); }
    .bottom { transform: rotateX(-90deg) translateZ(90px); }

    /* Multiple floating cubes */
    .cube:nth-child(2) { top: 20%; left: 20%; animation-delay: -4s; }
    .cube:nth-child(3) { top: 70%; left: 80%; animation-delay: -8s; }
    .cube:nth-child(4) { top: 30%; left: 70%; animation-delay: -12s; }

    /* Hero Content */
    .hero {
      position: relative;
      z-index: 10;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 2rem;
    }
    .content { max-width: 900px; }
    h1 {
      font-family: 'Orbitron', sans-serif;
      font-size: 6.5rem;
      font-weight: 900;
      background: linear-gradient(90deg, #fff, var(--accent));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 1.5rem;
      animation: titleGlow 4s infinite alternate;
    }
    @keyframes titleGlow {
      from { filter: drop-shadow(0 0 20px var(--glow)); }
      to { filter: drop-shadow(0 0 60px var(--glow)); }
    }
    p {
      font-size: 1.6rem;
      max-width: 700px;
      margin: 2rem auto;
      opacity: 0.9;
    }

    .btn {
      padding: 18px 50px;
      margin: 1rem;
      font-size: 1.3rem;
      font-weight: 700;
      border-radius: 50px;
      cursor: pointer;
      transition: all 0.4s;
      position: relative;
      overflow: hidden;
      text-transform: uppercase;
    }
    .btn-primary {
      background: linear-gradient(135deg, var(--accent), var(--purple));
      color: #000;
      border: none;
      box-shadow: 0 15px 40px rgba(0,245,255,0.4);
    }
    .btn-primary:hover {
      transform: translateY(-10px) scale(1.05);
      box-shadow: 0 30px 80px rgba(0,245,255,0.6);
    }
    .btn-outline {
      background: transparent;
      color: var(--accent);
      border: 2px solid var(--accent);
    }
    .btn-outline:hover {
      background: var(--accent);
      color: #000;
    }

    /* Floating particles */
    .particle {
      position: absolute;
      width: 4px; height: 4px;
      background: var(--accent);
      border-radius: 50%;
      animation: floatParticle 15s infinite linear;
      opacity: 0.6;
    }
    @keyframes floatParticle {
      0% { transform: translateY(100vh) translateX(0); }
      100% { transform: translateY(-100px) translateX(100px); }
    }

    footer {
      position: absolute;
      bottom: 30px;
      width: 100%;
      text-align: center;
      color: #666;
      font-size: 0.9rem;
      z-index: 10;
    }

    @media (max-width: 768px) {
      h1 { font-size: 4rem; }
      p { font-size: 1.3rem; }
      .cube { width: 120px; height: 120px; }
      .face { width: 120px; height: 120px; }
      .front  { transform: translateZ(60px); }
      .back   { transform: translateZ(-60px) rotateY(180deg); }
      .scene { animation: none; }
      .cube { animation: float 15s infinite ease-in-out; }
    }
  </style>
</head>
<body>

  <!-- 3D Animated Scene -->
  <div class="scene">
    <div class="cube">
      <div class="face front"></div>
      <div class="face back"></div>
      <div class="face right"></div>
      <div class="face left"></div>
      <div class="face top"></div>
      <div class="face bottom"></div>
    </div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
  </div>

  <!-- Floating particles -->
  <div class="particle" style="left:10%; animation-delay:0s;"></div>
  <div class="particle" style="left:20%; animation-delay:2s;"></div>
  <div class="particle" style="left:35%; animation-delay:5s;"></div>
  <div class="particle" style="left:50%; animation-delay:8s;"></div>
  <div class="particle" style="left:70%; animation-delay:3s;"></div>
  <div class="particle" style="left:85%; animation-delay:6s;"></div>

  <!-- Hero Content -->
  <div class="hero">
    <div class="content">
      <h1>NEXUS</h1>
      <p>The future isn't coming.<br>It's already here — and it's 3D.</p>
      <div>
        <button class="btn btn-primary">Launch App</button>
        <button class="btn btn-outline">Watch Demo</button>
      </div>
      <p style="margin-top:3rem; font-size:1rem; opacity:0.7;">
        No wallet needed • 100% on-chain • Built for speed
      </p>
    </div>
  </div>

  <footer>
    © 2025 NEXUS • Made with pure CSS 3D magic
  </footer>

</body>
</html>

:root {
  --bg: #0d0b1f;
  --card: #14122b;
  --accent: #00f5ff;
  --purple: #8b5cf6;
  --glow:  rgba(0,245,255,0.4);
}
* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family: 'Inter', sans-serif;
  background: var(--bg);
  color: #e0e0ff;
  overflow-x: hidden;
  perspective: 1500px;
  height: 100vh;
}

/* Floating 3D Scene */
.scene {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  transform-style: preserve-3d;
  animation: rotateScene 30s infinite linear;
}
@keyframes rotateScene {
  0% { transform: rotateY(0deg) rotateX(5deg); }
  100% { transform: rotateY(360deg) rotateX(5deg); }
}

.cube {
  position: absolute;
  width: 180px; height: 180px;
  transform-style: preserve-3d;
  top: 50%; left: 50%;
  animation: float 12s infinite ease-in-out;
}
@keyframes float {
  0%, 100% { transform: translateY(-20px) translateZ(0); }
  50% { transform: translateY(20px) translateZ(100px); }
}

.face {
  position: absolute;
  width: 180px; height: 180px;
  background: linear-gradient(135deg, rgba(0,245,255,0.2), rgba(139,92,246,0.3));
  border: 1px solid rgba(0,245,255,0.4);
  backdrop-filter: blur(10px);
  box-shadow: 0 0 40px var(--glow);
}
.front  { transform: translateZ(90px); }
.back   { transform: translateZ(-90px) rotateY(180deg); }
.right  { transform: rotateY(90deg) translateZ(90px); }
.left   { transform: rotateY(-90deg) translateZ(90px); }
.top    { transform: rotateX(90deg) translateZ(90px); }
.bottom { transform: rotateX(-90deg) translateZ(90px); }

/* Multiple floating cubes */
.cube:nth-child(2) { top: 20%; left: 20%; animation-delay: -4s; }
.cube:nth-child(3) { top: 70%; left: 80%; animation-delay: -8s; }
.cube:nth-child(4) { top: 30%; left: 70%; animation-delay: -12s; }

/* Hero Content */
.hero {
  position: relative;
  z-index: 10;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}
.content { max-width: 900px; }
h1 {
  font-family: 'Orbitron', sans-serif;
  font-size: 6.5rem;
  font-weight: 900;
  background: linear-gradient(90deg, #fff, var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 1.5rem;
  animation: titleGlow 4s infinite alternate;
}
@keyframes titleGlow {
  from { filter: drop-shadow(0 0 20px var(--glow)); }
  to { filter: drop-shadow(0 0 60px var(--glow)); }
}
p {
  font-size: 1.6rem;
  max-width: 700px;
  margin: 2rem auto;
  opacity: 0.9;
}

.btn {
  padding: 18px 50px;
  margin: 1rem;
  font-size: 1.3rem;
  font-weight: 700;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.4s;
  position: relative;
  overflow: hidden;
  text-transform: uppercase;
}
.btn-primary {
  background: linear-gradient(135deg, var(--accent), var(--purple));
  color: #000;
  border: none;
  box-shadow: 0 15px 40px rgba(0,245,255,0.4);
}
.btn-primary:hover {
  transform: translateY(-10px) scale(1.05);
  box-shadow: 0 30px 80px rgba(0,245,255,0.6);
}
.btn-outline {
  background: transparent;
  color: var(--accent);
  border: 2px solid var(--accent);
}
.btn-outline:hover {
  background: var(--accent);
  color: #000;
}

/* Floating particles */
.particle {
  position: absolute;
  width: 4px; height: 4px;
  background: var(--accent);
  border-radius: 50%;
  animation: floatParticle 15s infinite linear;
  opacity: 0.6;
}
@keyframes floatParticle {
  0% { transform: translateY(100vh) translateX(0); }
  100% { transform: translateY(-100px) translateX(100px); }
}

footer {
  position: absolute;
  bottom: 30px;
  width: 100%;
  text-align: center;
  color: #666;
  font-size: 0.9rem;
  z-index: 10;
}

@media (max-width: 768px) {
  h1 { font-size: 4rem; }
  p { font-size: 1.3rem; }
  .cube { width: 120px; height: 120px; }
  .face { width: 120px; height: 120px; }
  .front  { transform: translateZ(60px); }
  .back   { transform: translateZ(-60px) rotateY(180deg); }
  .scene { animation: none; }
  .cube { animation: float 15s infinite ease-in-out; }
}

Frequently Asked Questions

Common questions about NEXUS 3D — the free pure CSS 3D rotating cubes landing page.

Is this pure CSS 3D landing page free to download?

Yes — 100% free under Creative Commons Attribution 4.0. No sign-up, no payment. Click Download Project and use it in personal or commercial projects with attribution to Coodeverse.

How do you make a 3D rotating cube with pure CSS?

A CSS 3D cube needs four things: a parent with transform-style: preserve-3d, six face divs positioned with translateZ and rotateY/rotateX (Z offset = half of cube width), perspective set on the body or wrapper, and a @keyframes animation rotating the parent. The faces: .front { transform: translateZ(90px) }, .back { transform: translateZ(-90px) rotateY(180deg) }, .right { transform: rotateY(90deg) translateZ(90px) }, etc. Zero JavaScript needed.

What is CSS transform-style: preserve-3d?

transform-style: preserve-3d tells the browser that child elements should exist in 3D space rather than being flattened. Without it, rotating cube faces would appear flat. Both the .scene and each .cube use it so the six faces maintain their 3D positions as the parent rotates.

How are glassmorphism cube faces made in CSS?

Each face uses: background: linear-gradient(135deg, rgba(0,245,255,0.2), rgba(139,92,246,0.3)) for the tinted glass fill, border: 1px solid rgba(0,245,255,0.4) for the frosted edge, backdrop-filter: blur(10px) for the glass blur, and box-shadow: 0 0 40px var(--glow) for the neon halo. Pure CSS — no images.

Does this work on mobile browsers?

Yes. At max-width: 768px, the full scene rotation animation is disabled (animation: none) to save battery. Cube sizes shrink to 120px with Z offsets adjusted to 60px. The headline scales to 4rem. The page remains visually impressive on all screen sizes.

How do I change the neon color scheme?

Edit the CSS variables at the top: --accent: #00f5ff controls the cyan glow on cube faces, particles, and button borders. --purple: #8b5cf6 controls the gradient end. --bg: #0d0b1f is the background. Change --glow: rgba(0,245,255,0.4) to match your new accent. All colors update globally.

Where can I find more free CSS 3D and animation projects?

Browse the full collection at coodeverse.com/projects — Gold Circuit Board Background, VORTEX Interactive Canvas, INterior Design Landing Page, Luxury Business Card, Cosmos Star Animation, Holographic Login and more. All 100% free with complete source code.