如何使用CSS自定义属性每3秒将4个孩子在90度的圆周上旋转并变换？

Question

[我正在尝试使用称为.feat的CSS自定义属性，每3秒将90个圆圈中的4个子元素（--angle）旋转90度，但似乎无法正常工作：

function rotation() {
  let inner = document.querySelector('[inn]');
  let rota = inner.style.transform;
}

setInterval(rotation, 3000);

.feat-cont {
  width: 60vmax;
  height: 60vmax;
}

.feat-cont p {
  display: inline-block;
}

.inner {
  --angle: 0;
  
  position: relative;
  background-color: yellow;
  transform: rotate(var(--angle) * 1deg);
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.feat {
  position: absolute;
}

.feat1 {
  left: 25vmax;
}

.feat2 {
  left: 50vmax;
  top: 25vmax;
}

.feat3 {
  left: 25vmax;
  top: 50vmax;
}

.feat4 {
  top: 25vmax;
}

<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>

Answer 1

更新您的JavaScript代码

setInterval(rotation, 3000);
var deg = 90;
let inner = document.querySelector('.inner');

function rotation() {
 inner.style.transform='rotate('+deg+'deg)'; 
}

Answer 2

您可以使用angle更改CSS custom property CSSStyleDeclaration.setProperty()：

CSSStyleDeclaration.setProperty()

如果您不想使用CSS属性，则可以直接更改circle.style.setProperty('--angle', `${ angle }deg`); 属性：

style

但是，我想您需要在向相反方向旋转所有子代（circle.style.transform = `rotate(${ angle }deg)`; ）的同时向一个方向旋转圆，以使其保持笔直，所以使用CSS属性可能更方便：

.feat

const circle = document.querySelector('.circle');

let angle = 0;

setInterval(() => {
  angle += 90;
  
  circle.style.setProperty('--angle', `${ angle }deg`);
  circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}, 3000);

body {
  font-family: monospace;
}

.container {
  width: 60vmax;
  height: 60vmax;
  margin: 0 auto;
  overflow: hidden;
}

.circle {
  --angle: 0;
  --angle-inverse: 0;
  
  position: relative;
  background-color: yellow;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transition: transform linear 1s;
  transform: rotate(var(--angle));
}

.feat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 20vmax;
  height: 20vmax;
  text-align: center;
  transition: transform linear 1s;
}

.feat > img {
  width: 10vmax;
  height: 10vmax;
}

.feat > p {
  margin: 8px 0 0;
}

.feat1 {
  top: 0;
  left: 50%;
  transform: translate(-50%, 0) rotate(var(--angle-inverse));
}

.feat2 {
  right: 0;
  top: 50%;
  transform: translate(0, -50%) rotate(var(--angle-inverse));
}

.feat3 {
  bottom: 0;
  left: 50%;
  transform: translate(-50%, 0) rotate(var(--angle-inverse));
}

.feat4 {
  left: 0;
  top: 50%;
  transform: translate(0, -50%) rotate(var(--angle-inverse));
}