티스토리 뷰

CSS Animation

[CSS Animation] Skew

Skew

translate


기울기(skew)

기울기(skew)

속성값 예시 설명
skew(x-angle,y-angle) transform: skew(10deg, 10deg); X좌표, Y좌표 기울기를 나태냅니다.
skewX(angle) transform: skewX(10deg); X좌표 기울기를 나태냅니다.
skewY(angle) transform: skewY(10deg); Y좌표 기울기를 나태냅니다.

Sample1

skew를 이용한 기울기 예제입니다.

결과
skew01
skew02
skew03
skew04
skew05
CSS
.skew01 {transform: skew(10deg, 10deg);}
.skew02 {transform: skew(20deg, 20deg);}
.skew03 {transform: skew(30deg, 30deg);}
.skew04 {transform: skew(40deg, 40deg);}
.skew05 {transform: skew(50deg, 50deg);}

Sample2

skew X축을 이용한 기울기 예제입니다.

결과
skew06
skew07
skew08
skew09
skew10
CSS
.skew06 {transform: skewX(10deg);}
.skew07 {transform: skewX(20deg);}
.skew08 {transform: skewX(30deg);}
.skew09 {transform: skewX(40deg);}
.skew10 {transform: skewX(50deg);}

Sample3

skew Y축을 이용한 기울기 예제입니다.

결과
skew11
skew12
skew13
skew14
skew15
CSS
.skew11 {transform: skewY(10deg);}
.skew12 {transform: skewY(20deg);}
.skew13 {transform: skewY(30deg);}
.skew14 {transform: skewY(40deg);}
.skew15 {transform: skewY(50deg);}

공유하기(Share) 더보기

  • 네이버 블러그 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 트위터 공유하기
  • 트위터 공유하기

공감하기(Like) 더보기

UP NEXT : Ads by Google

질문하기(Questions)
댓글쓰기 폼