CSS(SCSS) - 변환(transform)

1. CSS(SCSS) - 변환(transform)

(1) transform

• 트랜스폼은 요소의 변환 효과를 부여하기 위한 속성을 말한다.

참고사항)

• transform은 2D 변환 함수와 3D 변환 함수로 나눠서 운영된다.

예1) - 2D 변환 함수
1. 픽셀 - px
translate(x,y) : 이동(x축, y축)

transform: translate(40px, 40px);

translateX(x) : 이동(x축)

transform: translateX(40px);
transform: translate(40px, 0);

translateY(y) : 이동(y축)

transform: translateY(40px);
transform: translate(0, 40px);

scale(x,y) : 크기(x축, y축)

transform : scale(1.5);
transform : scale(1.5, 1.5);

scaleX(x) : 크기(x축)

transform : scaleX(2);

scaleY(y) : 크기(y축)

transform : scaleY(2);

2. 각도 - deg
rotate(degree) : 회전(각도)

// 2D
transform: rotate(45deg); 

// 3D
transform: rotateX(45deg); 

// 3D
transform: rotateY(45deg); 

skew(x, y) : 기울임(x축, y축)
skewX(x) : 기울임(x축)
skewY(y) : 기울임(y축)
matrix(n,n,n,n,n,n) : 2차원 변환 효과 (작성법이 복잡하기 때문에 자주 사용하지 않음)

...

예2) - 3D 변환 함수
3. 픽셀 - px
perspective(n) : 원근법(거리)
translateZ(z) : 이동(z축)
translate3d(x,y,z) : 이동(x축, y축, z축)
scaleZ(z) : 크기(z축)
scale3d(x,y,z) : 크기(x축, y축, z축)

4. 각도 - deg
rotateX : 회전(x축)
rotateY : 회전(y축)
rotateZ : 회전(z축)
rotate3d : 회전(x축, y축, z축, 각도)

• perspective를 관찰 대상 자체(자식)로 사용할 경우 맨 앞에 사용해야 한다.

(2) perspective

• 하위 요소를 관찰하는 원근 거리를 지정하는 요소이다.

예)
단위 : px

(2-1) perspective 속성과 함수 차이점)

// 부모 (관찰 대상 자체의 부모)
perspective: 250px; 

// 자식 (관찰 대상 자체)
transform: perspective(300px); 

• 자식 : 관찰 대상 자체
• 부모 : 관찰 대상 자체의 부모

코드 예)

.container {
width: 100px;
height: 100px;
background-color: royalblue;
perspective: 200px;
}

.container .item {
width: 100px;
height: 100px;
background-color: orange;
transform: rotateY(45deg);
}

3) backface-visibility

• 3D 변환으로 회전된 요소의 뒷면 숨김 여부를 결정하는 속성이다.

예)
visible : 뒷면 보임
hidden : 뒷면 숨김