CSS) 변환 3D 속성

1) transform 3D 변환 함수

속성 값

값	의미	기본값
translate3d(x, y, z)	이동(X축, Y축, Z축)	단위
translateZ(z)	이동(Z축)	단위
scale3d(x, y, z)	크기(X축, Y축, Z축)	없음(배수)
scaleZ(z)	크기(Z축)	없음(배수)
rotate3d(z, y, z, a)	회전(X벡터, Y벡터, Z벡터, 각도)	없음, deg
rotateX(x)	회전(X축)	deg
rotateY(y)	회전(Y축)	deg
rotateZ(z)	회전(Z축)	deg
perspective(n)	원근법(거리)	단위
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)	3차원 변환 효과	없음

 

translateZ(z)

perspecive view로 봤을때(3D)일때 z축이 확인 가능하다. 왜냐하면 우리 눈과 정면이기 때문. 예제를 보면 금방 이해가 가능하다.
※ scss로 작성, 추후 scss에 대해서 다룰 예정. 개념설명을 위한 코드임

1. 2D(transform을 주석처리)

2. 3D(transform 주석해제, perspective view)

3. z축의 이동전(translateZ(z) 적용 전)

4. z축의 이동후(translateZ(z) 적용 후)

 

rotateX(x)

perspecive view로 봤을때(3D)일때 z축이 확인 가능하다. 왜냐하면 우리 눈과 정면이기 때문. 예제를 보면 금방 이해가 가능하다.

rotateX() - perspective() 적용 전

html

<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

css

img {
  width: 300px;
  border: 1px solid lightgray;
  transform: rotateX(45deg);
}

출력결과 

▷ 찌그러진 모양으로 출력된다. 실제는 찌그러진게 아님.

 

rotateX() - perspective() 적용 후

html

<img src="https://heropy.blog/css/images/logo.png" alt="HEROPY">

css

img {
  width: 300px;
  border: 1px solid lightgray;
  transform: perspective(200px) rotateX(45deg);
}

출력결과

▷ perspective함수는 transform의 맨 앞에서 선언되어야 한다.