transform을 사용한 텍스트 슬라이딩 효과

회원가입

출석체크

마이페이지

CGIMALL

jquery , CSS , PHP , Javascript , 무료폰트 , ASP

홈 > CSS > 기타효과 > transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective 상세정보

클라우드태그

Javascript

PHP

HTML

ASP

mysql

CSS

mobile

jquery

image

slide

占쌨댐옙

占쏙옙占쏙옙占쏙옙트

메뉴

현재접속자 명

transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective

해피팀

네티즌

소스분류

기타효과

다운로드 횟수

9 회

간단설명

transform css의 skew, translate를 이용하여 계단을 타고 오르는 듯한 텍스트 효과를 줄 수 있습니다.

평가하기

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

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

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

[html 소스]