如何用CSS自定义属性与transform实现圆内4个子元素每3秒旋转90度？

Let's get that circular rotation working properly—your core idea is solid, but there are three key issues stopping it from working as expected. Let's break them down and fix the code step by step.

What Was Wrong? #

• Your JavaScript wasn't updating anything: The rotation() function only grabbed the current transform value but never modified the --angle custom property or applied a new rotation.
• Invalid CSS rotation syntax: rotate(var(--angle) * 1deg) doesn't work in CSS—you need to use calc() to perform arithmetic with custom properties and units.
• No logic to increment the angle: There was no code to actually add 90 degrees to the rotation each interval.

Fixed Full Code #

HTML (unchanged) #

<div class='feat-cont'>
  <div class='inner' inn>
    <div class='feat feat1' f1>
      <img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
      <p>Fast Performance</p>
    </div>
    <div class='feat feat2' f2>
      <img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
      <p>64 GBs of memory</p>
    </div>
    <div class='feat feat3' f3>
      <img src="https://img.icons8.com/nolan/64/camera.png"/>
      <p>3K MP camera</p>
    </div>
    <div class='feat feat4' f4>
      <img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
      <p>Trusted brand</p>
    </div>
  </div>
</div>

CSS (fixed rotation calculation) #

.feat-cont { width: 60vmax; height: 60vmax; }
.feat-cont p { display: inline-block; }
.inner { 
  --angle: 0; 
  position: relative; 
  background-color: yellow; 
  /* Use calc() to multiply the angle variable by degrees */
  transform: rotate(calc(var(--angle) * 1deg)); 
  width: 100%; 
  height: 100%; 
  border-radius: 50%;
  /* Add transition for smooth rotation (optional but nice) */
  transition: transform 0.3s ease;
}
.feat { position: absolute; }
.feat1 { left: 25vmax; }
.feat2 { left: 50vmax; top: 25vmax; }
.feat3 { left: 25vmax; top: 50vmax; }
.feat4 { top: 25vmax; }

JavaScript (fixed rotation logic) #

// Grab the inner element once outside the function (more efficient)
const inner = document.querySelector('[inn]');
// Track the current angle starting from 0
let currentAngle = 0;

function rotation() {
  // Increment the angle by 90 each time
  currentAngle += 90;
  // Update the CSS custom property with the new angle
  inner.style.setProperty('--angle', currentAngle);
}

// Start the interval
setInterval(rotation, 3000);

Key Improvements Explained #

1. Reusable element reference: We grab the [inn] element once outside the interval function instead of querying it every 3 seconds—this is more efficient.
2. Angle tracking: We use a currentAngle variable to keep track of the rotation amount, incrementing it by 90 each interval.
3. Valid CSS calculation: calc(var(--angle) * 1deg) tells CSS to multiply our number value (from --angle) by degrees to create a valid rotation value.
4. Optional smooth transition: Added a transition property to make the rotation animate smoothly instead of jumping instantly (you can remove this if you prefer the snap effect).

Now your inner container will rotate 90 degrees clockwise every 3 seconds, exactly as you intended!

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