CSS3 One‑Shot 3D Effect Tutorial Using Perspective, Transform‑Style, and Animation

In this article the author, a front‑end developer, shares a complete CSS3 “one‑shot” 3D effect that creates a continuous scrolling scene using perspective, 3D transforms, and animation, suitable for celebrating the Chinese New Year.

The overall idea is to arrange multiple parallel scenes in a 3D space and move a virtual camera through them, giving the impression of a single seamless journey.

The HTML structure consists of a series of

<div class="sence-box sence-box1">
  <div class="sence-in">
    <div class="text-left text-box">掘金多多</div>
    <div class="text-right text-box">大展鸿图</div>
    <div class="long long-left"></div>
    <div class="long long-right"></div>
    <div class="denglong-box"></div>
    <div class="long2 long2-left"></div>
    <div class="long2 long2-right"></div>
  </div>
</div>
<div class="sence-box sence-box2">
  ... (subsequent scene boxes) ...
</div>

containers where each .sence-box holds the scene elements.

Key CSS concepts covered include the 3‑D coordinate system (x left‑negative/right‑positive, y top‑negative/bottom‑positive, z inside‑negative/outside‑positive), the perspective property to set the viewer‑to‑plane distance, and transform-style: preserve‑3d to maintain 3‑D layout on parent elements.

Example CSS for perspective: .container { perspective: 1000px; } Example CSS for preserving 3‑D: .perspective-box { transform-style: preserve-3d; } Animations are defined with @keyframes and applied via the animation property. The article shows a rotation animation and a custom perspective-content animation that moves elements along the Z‑axis to create the looping effect.

Rotation keyframes example:

@keyframes rotate {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(360deg); }
}

Applying the animation:

.perspective-content { animation: rotate 5s infinite linear; }

Full Z‑axis animation keyframes:

@keyframes perspective-content {
  0% { transform: translateZ(0px); }
  50% { transform: translateZ(6000px); }
  50.1% { transform: translateZ(-6000px); }
  100% { transform: translateZ(0px); }
}

Additional tips include setting different Z offsets for elements to enhance depth perception and ensuring perspective alone does not create true 3‑D layout without transform-style: preserve‑3d.

The article concludes with a reminder that the full source code is available online and invites readers to discuss and ask questions.