본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/CSS

[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);}

 

AD

comments