Как повернуть 4 детей внутри круга на 90 градусов каждые 3 секунды, используя CSS настраиваемые свойства и преобразовать?

Question

Я пытаюсь повернуть 4 дочерних элемента (.feat) внутри круга на 90 градусов каждые 3 секунды, используя настраиваемое свойство CSS с именем --angle, но похоже, что это не работает должным образом:

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

Вы можете изменить настраиваемое свойство angle CSS , используя CSSStyleDeclaration.setProperty():

circle.style.setProperty('--angle', `${ angle }deg`);

Также обратите внимание, что вы используете его как transform: rotate(var(--angle)), а не как rotate(var(--angle) * 1deg), поэтому единица измерения уже должна быть включена в свойство CSS.

Если вы не хотите использовать свойства CSS, вы можете напрямую изменить атрибут style :

circle.style.transform = `rotate(${ angle }deg)`;

Однако, я думаю, вам нужно повернуть круг в одном направлении, вращая все дочерние элементы (.feat) в противоположном направлении, чтобы они оставались прямыми, поэтому использование свойств CSS, вероятно, более удобно, так как в противном случае вам пришлось бы изменить атрибут style во всех 4 дочерних элементах:

const circle = document.querySelector('.circle');
const prev = document.querySelector('.prev');
const next = document.querySelector('.next');
const step = 90;

let angle = 0;
let intervalID = null;

function updateRotation() {
  circle.style.setProperty('--angle', `${ angle }deg`);
  circle.style.setProperty('--angle-inverse', `${ -angle }deg`);
}

function autoRotate() {
  intervalID = setInterval(() => {
    angle += step;  
    updateRotation();
  }, 3000);
}

prev.onclick = () => {
  clearInterval(intervalID);
  angle -= step;
  updateRotation();
  autoRotate();
};

next.onclick = () => {
  clearInterval(intervalID);
  angle += step;
  updateRotation();
  autoRotate();
};

autoRotate();

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));
}

.button {
  position: fixed;
  top: 0;
  bottom: 0;
  background: transparent;
  border: 0;
  padding: 32px;
  outline: none;
  font-family: monospace;
  font-size: 32px;
}

.button:hover {
  background: rgba(0, 0, 0, .0625);
}

.prev {
  left: 0;
}

.next {
  right: 0;
}

<div class="container">
  <button class="button prev">‹</button>
  
  <div class="circle">
    <div class="feat feat1">
      <img src="https://img.icons8.com/nolan/64/fast-forward.png"/>
      <p>Fast Performance</p>
    </div>

    <div class="feat feat2">
      <img src="https://img.icons8.com/color/48/000000/memory-slot.png"/>
      <p>64 GBs of memory</p>
    </div>

    <div class="feat feat3">
      <img src="https://img.icons8.com/nolan/64/camera.png"/>
      <p>3K MP camera</p>
    </div>

    <div class="feat feat4">
      <img src="https://img.icons8.com/dusk/64/000000/branding.png"/>
      <p>Trusted brand</p>
    </div>
  </div>
  
  <button class="button next">›</button>
</div>

Answer 2

Добавил чистое CSS решение, javascript манипуляции могут и не понадобиться, тоже легковесный. Просто используйте свойство CSS inbuilt Animation .

.inner{animation: rotate 12s infinite;}

@keyframes rotate{
  0%{transform: rotate(0deg);}
  25%{transform: rotate(90deg);}
  50%{transform: rotate(180deg);}
  75%{transform: rotate(270deg);}
  100%{transform: rotate(360deg);}
}

Найдите здесь кодовое поле

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

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

.inner {
  position: relative;
  background-color: yellow;
  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;
}

.inner {
  animation: rotate 12s infinite;
}

@keyframes rotate{
0%{transform: rotate(0deg);}
  25%{transform: rotate(90deg);}
  50%{transform: rotate(180deg);}
  75%{transform: rotate(270deg);}
  100%{transform: rotate(360deg);}
}

@keyframes r-rotate{
0%{transform: rotate(0deg);}
  25%{transform: rotate(-90deg);}
  50%{transform: rotate(-180deg);}
  75%{transform: rotate(-270deg);}
  100%{transform: rotate(-360deg);}
}

.feat {
  animation: r-rotate 12s infinite;
}

<nav></nav>

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

Answer 3

Обновите свой javascript Код

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

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