Code Playground

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <ul class="team" style="--member-count: 10">
  <li style="--member-idx:0"><img src="https://randomuser.me/api/portraits/women/1.jpg" alt=""></li>
  <li style="--member-idx:1"><img src="https://randomuser.me/api/portraits/men/2.jpg" alt=""></li>
  <li style="--member-idx:2"><img src="https://randomuser.me/api/portraits/women/3.jpg" alt=""></li>
  <li style="--member-idx:3"><img src="https://randomuser.me/api/portraits/men/4.jpg" alt=""></li>
  <li style="--member-idx:4"><img src="https://randomuser.me/api/portraits/women/5.jpg" alt=""></li>
  <li style="--member-idx:5"><img src="https://randomuser.me/api/portraits/men/6.jpg" alt=""></li>
  <li style="--member-idx:6"><img src="https://randomuser.me/api/portraits/women/7.jpg" alt=""></li>
  <li style="--member-idx:7"><img src="https://randomuser.me/api/portraits/men/8.jpg" alt=""></li>
  <li style="--member-idx:8"><img src="https://randomuser.me/api/portraits/women/9.jpg" alt=""></li>
  <li style="--member-idx:9"><img src="https://randomuser.me/api/portraits/men/10.jpg" alt=""></li>
</ul>
</body>
</html>

@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800);
*,
:after,
:before {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
@property --memberRotation {
  syntax: "<number>";
  initial-value: 0;
  inherits: true;
}
* { box-sizing: border-box; margin: 0; padding: 0 }
ul.team{
  width: 80vmin;
  list-style: none;
  
  aspect-ratio: 1/1;
  border-radius: 50%;
  animation: memberRotation 10s linear infinite;

> li {
    offset-path: border-box;
    offset-distance: calc(100% / var(--member-count) * var(--member-idx) + (var(--memberRotation) * 100%));
    width: calc(100% / (1 + (1 / sin(180deg / var(--member-count)))));
    position: relative;
    > img {
      position: absolute;
      width: 100%;
      border: 5px solid red;
      scale: .8;
      
    aspect-ratio: 1/1;  
      object-fit: cover;
      border-radius: 50%;
      rotate: calc(-360deg / var(--member-count) * var(--member-idx) - (360deg * var(--memberRotation)))
    }
  }
  &:has(img:hover){
    animation-play-state: paused
  }
}

@keyframes memberRotation {
  to { --memberRotation: 1 }
}

html, body { height: 100% }
body { margin: 0; display: grid; place-items: center; padding: 2rem; background-color: black }

Frontend Forever App