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

[해피CGI][cgimall] skew 를 이용한 종이 접힌 듯한 효과 - Skew text 본문

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

[해피CGI][cgimall] skew 를 이용한 종이 접힌 듯한 효과 - Skew text

해피CGI윤실장 2021. 5. 27. 09:17


텍스트에 마우스를 올리면 글씨 및 영역이 기울어져 종이가 접힌듯한 효과를 보여줍니다.

소스를 확인해보시면
transform 의 skew 스타일을 이용하여 글씨 및 영역을 기울이며,
box-shadow를 주어 입체감을 준 것을 확인해보실 수 있습니다.


[html 소스]

 



[주요 css]

 

 

 

 

홈페이지바로가기

저작자표시

'웹프로그램밍 자료실 > 기타 자료' 카테고리의 다른 글

[해피CGI][cgimall] Pure CSS Sliding Tab Select 슬라이딩 탭  (0) 2021.06.02
[해피CGI][cgimall] Pure CSS Slideshow Gallery 순수 CSS만으로 구현된 이미지 슬라이드  (0) 2021.06.01
[해피CGI][cgimall] transform을 사용한 텍스트 슬라이딩 효과 - Sliding Perspective  (0) 2021.05.25
[해피CGI][cgimall] Masonry Grid with CSS Column  (0) 2021.05.20
[해피CGI][cgimall] [CSS] Explanation of different points of the image / css로 구현한 이미지의 각 부분 설명  (0) 2021.05.18
공유하기 링크
'웹프로그램밍 자료실/기타 자료' Related Articles more
Comments