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
을 수에 맞게 조절해 주면 예쁜 원이 만들어 진다!