react 빙글빙글 원안에 텍스트

 const items = ["P", "I", "R", "A", "T", "E", "", "K", "I", "N", "G", "", "-", "", "P", "I", "R", "A", "T", "E", "", "K", "I", "N", "G", "", "-", "",];

개별마다 rotate를 주어야 함으로 배열을 만들어준다.

전체 코드이다.

import styled, { keyframes } from "styled-components";

const Rounded = () => {
    const items = ["P", "I", "R", "A", "T", "E", "", "K", "I", "N", "G", "", "-", "", "P", "I", "R", "A", "T", "E", "", "K", "I", "N", "G", "", "-", "",];
    
    return (
        <Contain>
            <Circle>
                {items.map((item, i) => {
                    return (
                        <CircleText key={i}
                            style={{
                                transform: `rotate(${i * 13}deg)`,
                                transformOrigin: "0 100px",
                            }}
                        >
                            {item}
                        </CircleText>
                    )
                })}
            </Circle>
        </Contain>
    )
}
export default Rounded;

const Contain = styled.div`
    margin:100px;
    position:relative;
`

const rotateText = keyframes`
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
`


const Circle = styled.div`
    width:200px;
    height:200px;
    position:absolute;
    z-index:99;
    left:0px;
    top:0px;
    display:flex;
    aling-items:center;
    animation: ${rotateText} 20s linear infinite;
`


const CircleText = styled.div`
    position:absolute;
    width:100%;
    height:100%;
    left:100px;
`

배열의 개수마다 조정이 필요하다. transform:rotate(${i * 13}deg) 부분의 13을 수에 맞게 조절해 주면 예쁜 원이 만들어 진다!