transform

transform 속성은 요소의 움직임을 표현합니다.

특징	설명
기본 값	none
상속	안됨
애니메이션	가능
버전	CSS3

Definition

• transform 속성은 요소의 움직임을 표현합니다.

Syntax

transform : none | transform-functions | inherit;

Property

속성 값	설명
none	transform을 적용하지 않습니다.
matrix(n,n,n,n,n,n)	지정한 위치로 이동을 나타냅니다.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	지정한 3D 위치로 이동을 나타냅니다.
translate(x,y)	X좌표, Y좌표 이동을 나태냅니다.
translate3d(x,y,z)	X좌표, Y좌표, Z좌표 이동을 나태냅니다.
translateX(x)	X좌표 이동을 나태냅니다.
translateY(y)	Y좌표 이동을 나태냅니다.
translateZ(z)	Z좌표 이동을 나태냅니다.
scale(x,y)	X좌표, Y좌표 확대를 나태냅니다.
scale3d(x,y,z)	X좌표, Y좌표, Z좌표 확대를 나태냅니다.
scaleX(x)	X좌표 확대를 나태냅니다.
scaleY(y)	Y좌표 확대를 나태냅니다.
scaleZ(z)	Z좌표 확대를 나태냅니다.
rotate(angle)	각도로 회전을 나타냅니다.
rotate3d(x,y,z,angle)	X축, Y축, Z축 회전을 나타냅니다.
rotateX(angle)	X축 회전을 나타냅니다
rotateY(angle)	Y축 회전을 나타냅니다
rotateZ(angle)	Z축 회전을 나타냅니다
skew(x-angle,y-angle)	X좌표, Y좌표 기울기를 나태냅니다.
skewX(angle)	X좌표 기울기를 나태냅니다.
skewY(angle)	Y좌표 기울기를 나태냅니다.
perspective(n)	원근점을 설정합니다.
inherit	z-index의 값을 상위요소한테 상속받습니다.

Compatibility

							6	7	8	9	10	11
transform(2D)
transform(3D)

Sample1 translate의 크기 변화에 따른 애니메이션입니다.

translate1

translate2

translate3

translate4

translate5

• .translate1 {transform: translate(10px, 20px);}
• .translate2 {transform: translate(20px, 20px);}
• .translate3 {transform: translate(30px, 30px);}
• .translate4 {transform: translate(40px, 40px);}
• .translate5 {transform: translate(50px, 50px);}

Sample2 translateX축 크기 변화에 따른 애니메이션입니다.

translate6

translate7

translate8

translate9

translate10

• .translate6 {transform: translateX(10px);}
• .translate7 {transform: translateX(20px);}
• .translate8 {transform: translateX(30px);}
• .translate9 {transform: translateX(40px);}
• .translate10 {transform: translateX(50px);}

Sample3 translateY축 크기 변화에 따른 애니메이션입니다.

translate11

translate12

translate13

translate14

translate15

• .translate11 {transform: translateY(10px);}
• .translate12 {transform: translateY(20px);}
• .translate13 {transform: translateY(30px);}
• .translate14 {transform: translateY(40px);}
• .translate15 {transform: translateY(50px);}

Sample4 scale1 크기별 효과입니다.

scale1

scale2

scale3

scale4

scale5

• .scale1 {transform: scale(1.1,1.1);}
• .scale2 {transform: scale(1.2,1.2);}
• .scale3 {transform: scale(1.3,1.3);}
• .scale4 {transform: scale(1.4,1.4);}
• .scale5 {transform: scale(1.5,1.5);}

Sample5 scale 크기별 효과입니다.

scale6

scale7

scale8

scale9

scale10

• .scale6 {transform: scale(0.9,0.9);}
• .scale7 {transform: scale(0.8,0.8);}
• .scale8 {transform: scale(0.7,0.7);}
• .scale9 {transform: scale(0.6,0.6);}
• .scale10 {transform: scale(0.5,0.5);}

Sample6 scaleX 크기별 효과입니다.

scale11

scale12

scale13

scale14

scale15

• .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);}

Sample7 scaleY 크기별 효과입니다.

scale16

scale17

scale18

scale19

scale20

• .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);}