웹솔루션개발 22년 노하우! 해피CGI의 모든것

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

웹프로그램밍 자료실/기타 자료

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

해피CGI윤실장 2021. 5. 25. 09:30


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

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

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


[html 소스]

 



[주요 css]

 

 

 

 

홈페이지바로가기

Comments