[해피CGI][cgimall] transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective

텍스트에 마우스가 올라가면 우측 이미지처럼 텍스트가 계단을 타고 미끄러져 오르는 듯한 효과를 볼 수 있습니다.

소스를 살펴보면 transform의  skew를 이용하여 계단 모양을 만들고

마우스 올릴 시 transform: translate(0, -50px); 스타일을 통해 각 영역의 글자를 위로 올리는 것을 확인해보실 수 있습니다.


[html 소스]

 

[주요 css]