본문 바로가기

Webstoryboy

Category

Explanation

ANIMATION/CSS

[CSS Animation] scale

Scale

translate


확대(scale)

확대(scale)

속성값 예시 설명
scale(x,y) transform: scale(2, 2); X좌표, Y좌표 확대를 나태냅니다.
scale3d(x,y,z) transform: scale3d(2, 2, 2); X좌표, Y좌표, Z좌표 확대를 나태냅니다.
scaleX(x) transform: scaleX(2); X좌표 확대를 나태냅니다.
scaleY(y) transform: scaleY(2); Y좌표 확대를 나태냅니다.
scaleZ(z) transform: scaleZ(2); Z좌표 확대를 나태냅니다.

Sample1

scale의 값을 크게 표현한 예제입니다.

결과
scale01
scale02
scale03
scale04
scale05
CSS
.scale01 {transform: scale(1.1, 1.1);}
.scale02 {transform: scale(1.2, 1.2);}
.scale03 {transform: scale(1.3, 1.3);}
.scale04 {transform: scale(1.4, 1.4);}
.scale05 {transform: scale(1.5, 1.5);}

 

Sample2

scale의 값을 작게 표현한 예제입니다.

결과
scale06
scale07
scale08
scale09
scale10
CSS
.scale06 {transform: scale(0.9, 0.9);}
.scale07 {transform: scale(0.8, 0.8);}
.scale08 {transform: scale(0.7, 0.7);}
.scale09 {transform: scale(0.6, 0.6);}
.scale10 {transform: scale(0.5, 0.5);}

 

Sample3

scale X축의 값을 크게 표현한 예제입니다.

결과
scale11
scale12
scale13
scale14
scale15
CSS
.scale11 {transform: scaleX(1.1);}
.scale12 {transform: scaleX(1.2);}
.scale13 {transform: scaleX(1.3);}
.scale14 {transform: scaleX(1.4);}
.scale15 {transform: scaleX(1.5);}

 

Sample4

scale Y축의 값을 크게 표현한 예제입니다.

결과
scale16
scale17
scale18
scale19
scale20
CSS
.scale16 {transform: scaleY(1.1);}
.scale17 {transform: scaleY(1.2);}
.scale18 {transform: scaleY(1.3);}
.scale19 {transform: scaleY(1.4);}
.scale20 {transform: scaleY(1.5);}

 

Tag

AD

comments