求可动态修改-webkit-transform实现Div折叠效果的JavaScript脚本

Hey there! I totally get how frustrating it is to hunt for a specific UI effect without luck—let me help you out with this foldable div setup using rotateY() that behaves exactly like you described: no rotation when there’s enough space, and automatic folding/closing when space runs out.

Core Logic Recap #

The effect relies on:

1. Checking if the container has enough width to display all divs without overlap
2. Dynamically adjusting the rotateY() value via JavaScript based on available space
3. Tweaking margins to make divs "close in" on each other when space is tight

Full Working Example #

Here’s a ready-to-use implementation you can tweak to fit your needs:

HTML

<div class="fold-container">
  <div class="fold-item">Card 1</div>
  <div class="fold-item">Card 2</div>
  <div class="fold-item">Card 3</div>
  <div class="fold-item">Card 4</div>
  <div class="fold-item">Card 5</div>
</div>

CSS

.fold-container {
  display: flex;
  justify-content: center;
  gap: 2rem;
  padding: 2rem;
  perspective: 1000px; /* Critical for 3D rotation depth */
  overflow: hidden;
  width: 100%;
}

.fold-item {
  width: 200px;
  height: 300px;
  background: #4285F4;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  border-radius: 8px;
  transition: transform 0.3s ease, margin 0.3s ease; /* Smooth animation */
  transform-style: preserve-3d; /* Maintain 3D space for children */
}

JavaScript

const container = document.querySelector('.fold-container');
const items = document.querySelectorAll('.fold-item');

// Calculate total width needed to fit all items without folding
function getRequiredWidth() {
  const itemWidth = items[0].offsetWidth;
  const gapSize = parseInt(getComputedStyle(container).gap);
  return items.length * itemWidth + (items.length - 1) * gapSize;
}

// Apply fold effect based on available space
function updateFoldState() {
  const availableWidth = container.offsetWidth;
  const requiredWidth = getRequiredWidth();

  // Reset if there's enough space
  if (availableWidth >= requiredWidth) {
    items.forEach(item => {
      item.style.transform = 'rotateY(0deg)';
      item.style.margin = '0';
    });
    return;
  }

  // Calculate how much we need to "shrink" the layout
  const spaceDeficit = requiredWidth - availableWidth;
  const maxRotation = 45; // Max fold angle (adjust this for more/less fold)
  const totalAdjustment = spaceDeficit / 2; // Split deficit between left/right sides

  items.forEach((item, index) => {
    // Calculate position weight (0 = leftmost, 1 = rightmost)
    const positionWeight = index / (items.length - 1);
    // Rotate left items counterclockwise, right items clockwise
    const rotationAngle = (positionWeight - 0.5) * 2 * maxRotation;
    // Pull items closer to center based on their position
    const marginAdjustment = (1 - Math.abs(positionWeight - 0.5) * 2) * totalAdjustment / items.length;

    item.style.transform = `rotateY(${rotationAngle}deg)`;
    item.style.margin = `0 ${-marginAdjustment}px`;
  });
}

// Initialize on page load
updateFoldState();

// Update when window resizes
window.addEventListener('resize', updateFoldState);

Key Customization Tips #

• Adjust maxRotation in the JS to control how far the divs fold (higher = more extreme angle)
• Modify the .fold-item CSS to change size, colors, or transition speed
• If you want only the outer divs to fold (not all), tweak the positionWeight logic to target specific indices
• Add backface-visibility: hidden; to .fold-item if you don’t want the back of the rotated div to show

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