CSS_transform(변환)

▶transform 이란?

요소를 변환시켜주는 속성으로 다양한 변환함수를 사용하여 요소를 원근법 이동 크기 회전 기울임을 하는 변화의 효과를 줄 수 있다.

 

▶2D 변환함수

▷이동(px)

translate(x,y) / translateX(x) / translateY(y)

X,y값으로 값을 이동시켜줄 수 있다.

 

▷크기(px)

scale(x,y)

x,y값만큼 객체의 크기를 변경시켜줄 수 있다.

한쪽만 크기를 키우면 객체가 찌그러지기때문에 보통 x혹은 y 하나가 아닌 한번에 두개를 모두 입력해준다.

 

▷회전(degree)

rotate(deg)

해당 각도의 수치많큼 요소를 2D로 회전시킨다.

 

▷기울임(deg)

skewX(x) / skewY(y)

객체를 마름모형으로 변경할 수 있게 만들어주는 함수로서, x와 y축에 해당하는 기울임의 각도를 ( ) 안에 입력해준다.

 

▶3D 변환함수

▷회전(deg)

rotateX(x), rotateY(y)

deg 수치를 x와 y에 입력하여 해당 값만큼 요소를 3D로 회전시켜준다.

 

▷원근법(px)

perspective(n)

원근거리를 만들어주는 함수로서 제일 앞에 작성해야한다.

 

▷기울임(deg)

skewX(deg) / skewY(deg)

3D 형식으로 기울여진다.