CSS3 Transition实现3D盒子Z轴旋转时元素间空白问题求助

Let's break down why you're seeing that annoying gap and how to fix it while keeping the scale-based flip effect you need.

The Root Cause #

Your original setup moves the first div way off-screen (left: -101%) while shrinking its width and scaling it down, and brings the second div from off-screen to the center. The problem is that during the transition, there's a moment where neither div is fully covering the viewport—their position and size changes don't sync up perfectly with the scale transform, leaving a blank spot.

The Fix: Sync Transform Origins & Adjust Position Logic #

We need to make the scale transform happen from the edge where the two divs meet, so their expansion/shrinking overlaps seamlessly. Here's the revised code:

body { 
  overflow: hidden; 
  margin: 0; /* Remove default body margin to avoid unexpected gaps */
}
div { 
  position: absolute; 
  top: 0;
  height: 100%; 
  margin: 0;
  transition: transform 0.8s ease-out, width 0.8s ease-in;
}
div:first-child {
  left: 0;
  width: 100%;
  background-color: #453525;
  transform: scaleX(1);
  transform-origin: right center; /* Scale inward from the right edge */
}
div:nth-child(2) {
  left: 0; /* Keep it in viewport with zero initial width */
  width: 0;
  background-color: #754512;
  transform: scaleX(0);
  transform-origin: left center; /* Scale outward from the left edge */
}
body:hover div:first-child {
  transform: scaleX(0);
  width: 0; /* Shrink width in sync with scaling */
  /* No need to move off-screen—transform origin handles the "push" */
}
body:hover div:nth-child(2) {
  transform: scaleX(1);
  width: 100%; /* Expand width in sync with scaling */
}

<div>Your first div content here</div>
<div>Your second div content here</div>

Key Changes Explained: #

• transform-origin adjustment: Setting the first div's origin to right center makes it shrink inward from the right edge (mimicking a box face flipping around the Z-axis), while the second div's left center origin makes it expand outward from the left edge. This ensures their animation paths overlap perfectly, eliminating the gap.
• Removed off-screen positioning: We keep both divs anchored to left: 0 instead of moving them off-screen. Adjusting width alongside scale ensures at least one div covers the viewport at every stage of the animation.
• Simplified transitions: We dropped the left transition since we're no longer animating that property, making the animation more predictable and smooth.

Why This Works For Your Content #

Since you need the scale effect to simulate flipping, this setup maintains that 3D-like feel—your content will shrink/grow naturally along with the div's scale, just like it would on a rotating box face. The width adjustment ensures content doesn't get clipped awkwardly during the transition.

内容的提问来源于stack exchange，提问作者Richard