Всем доброго времени суток. Такой вопрос, не знаю как сделать так чтобы к каждому слову в круге можно было обращаться по отдельности(в css нужно будет цвет через одно слово менять буквам). Тут код https://jsfiddle.net/1st3gypz/10/
let circle = document.querySelector('.circle');
let content = 'РазработкаРазработкаРазработкаРазработка';
let radius = 180;
function generateLetters(text) {
circle.innerHTML = ''
const letters = text.split('')
const step = 360 / letters.length
letters.forEach((l, i) => {
const span = document.createElement('span')
span.innerText = l
const deg = step * i
span.style.transform = transform(deg, radius)
circle.append(span)
})
}
function transform(deg, radius = 180) {
return `rotateY(${deg}deg) translateZ(${radius}px)`
}
generateLetters(content)
.slide-page__content {
min-height: 100vh;
position: relative;
padding: 100px 60px 0px 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.scene {
margin: 0px -60px 0px 0px;
perspective: 1000px;
perspective-origin: 0 -150px;
transform-style: preserve-3d;
}
.circle {
transform-style: preserve-3d;
animation: rotate 35s linear infinite;
}
.circle span {
text-transform: uppercase;
font-weight: bold;
position: absolute;
top: 0;
left: 0;
min-width: 33px;
background: #161616;
color: black;
-webkit-text-stroke: 1px #ccba96;
-webkit-text-fill-color: #161616;
font-size: 28px;
perspective-origin: center;
transform-style: preserve-3d;
border-left: 4px solid #161616;
border-right: 4px solid #161616;
border-top: 10px solid #161616;
border-bottom: 10px solid #161616;
border-radius: 2px;
}
.circle span::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(22, 22, 22, 0.45);
transform: translateZ(-5px);
}
.circle span:nth-child(-n+10) {
color: #ccba96;
-webkit-text-stroke: 0px #ccba96;
-webkit-text-fill-color: #ccba96;
}
@keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(1turn);
}
}
<div class="slide-page__content">
<div class="scene">
<div class="circle"></div>
</div>
</div>