[CSS] transform에서 자주 사용하는 함수 정리, perspective 함수와 속성, backface-visibility 속성

transform

• 변환함수를 속성값으로 사용해 요소를 변환시키는 속성
• 원근거리를 나타내는 함수 perspective()를 transform의 value로 제일 앞에 사용해야한다
• 원근거리함수를 속성값으로 주고 싶지 않다면 변환함수만 속성값으로 넣을 수 있다

div {
  transform: perspective(), 변환함수1 변환함수2 변환함수3…;
}

 

transform의 속성값 종류 (변환함수 종류)

1. translate(x, y)

• 요소를 화면에서 X축으로 x만큼, Y축으로 y만큼 이동
• 단위: px

개별함수로도 사용 가능

• translateX(x): 요소를 화면에서 X축으로 x만큼 이동
• translateY(y): 요소를 화면에서 Y축으로 y만큼 이동

2. scale(x, y)

• 요소의 크기를 X축으로 x배, Y축으로 y배 확대 또는 축소
• 값을 하나만 입력하면 x, y에 동일한 값이 들어간다
• 단위: 없음(배수)

3. rotate(angle)

• 요소의 가운데를 기준으로 angle˚ 만큼  시계방향으로 회전
• 그냥 rotate() 함수는 2D 변환함수다
• 단위: deg

개별함수로도 사용 가능

rotateX, Y, Z는 3D 변환함수다

• rotateX(x): 요소를 화면에서 X축을 기준으로 x만큼 회전
• rotateY(y): 요소를 화면에서 Y축을 기준으로 y만큼 회전
• rotateZ(z): 요소를 화면에서 Z축을 기준으로 z만큼 회전

4. skew(x, y)

• 요소를 X축으로 x˚만큼 Y축으로 y˚만큼 기울임
• 단위: deg

6. perspective(n)

• 하위 요소를 관찰하는 원근거리를 지정
• 단위: px 등 (원근거리를 나타낼 수 있는 단위)

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

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

 

perspective() 함수 vs perspective 속성

1. perspective() 함수

• transform의 첫번째 속성값
• perspective() 함수를 적용한 요소를 관찰 대상으로 삼는다
• 관찰하는 기준점을 설정할때는 transform-origin 속성을 사용한다

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

2. perspective 속성

• perspective 속성이 적용된 요소의 자식요소를 관찰대상으로 삼는다
• 관찰하는 기준점을 설정할때는 perspective-origin 속성을 사용한다

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

 

backface-visibility

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

• visible: 뒷면 보임 (default)
• hidden: 뒷면 숨김

1. visible

아무 속성도 없기 때문에 기본값 backface-visibility: visible이 적용되어 요소 뒷면이 보인다

.container {
  width: 100px;
  height: 100px;
  background-color: royalblue;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
}

 

2. hidden

뒤집어진 요소는 더이상 화면에 보이지 않는다

.container {
  width: 100px;
  height: 100px;
  background-color: royalblue;
}
.container .item {
  width: 100px;
  height: 100px;
  background-color: orange;
  font-size: 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}