03. About 화면: 글자 회전

about 페이지에는 동아리 소개 글과 운영진 카드를 넣었다. 화면을 만들고 보니 너무 심심해서 간단하게 애니메이션을 넣었다.

 

이렇게 있을 때 since, what 글자들만 360도 회전하고 싶었다.

 

 h2{
        font-weight: 900;
        display: inline-block;
        animation: flip 8s infinite;
    }
    
@keyframes flip{
    0%,100%{ 
        transform: rotateY(0); 
    }
    50%{
        transform: rotateY(360deg); 
    }
}

 

keyframe을 rotateY로 360도 회전하게 했다. 그리고 h2가 회전 중심축을 기준으로 적절하게 위치와 크기를 유지하기 위해 inline-block을 사용했다. (자연스러움)