패스트캠퍼스 챌린지 20일차 - Part1. Ch8

이제 css의 변환 효과에 대해 살펴보자.

• transform : 요소의 변환 효과 지정 속성. 띄어쓰기로 구분해서 [ transform: 변환함수1 변환함수2 변환함수3 ...; ] 와 같이 여러 함수를 한번에 사용할 수 있다. transform에 사용할 수 있는 변환 함수는 크게 2D 변환 함수와 3D 변환 함수로 나뉜다. 각각 살펴보자!

2D 변환 함수

• translate(x, y) : x축과 y축 이동. translateX(x) 나 translateY(y)와 같이 한 쪽 축으로만 이동시킬 수 있다. 참고로 함수의 소괄호 사이에 작성하는 x, y 값 등을 인수(=인자, Argument) 라고 한다.
• scale(x, y) : 크기를 배로 늘려줌. 
• rotate(deg) : 요소를 회전시킴(각도).

요소를 45도 회전

• skew(x, y) : x축과 y축으로 기울임. 요소를 기울여서 마름모 형태를 만들 때 사용한다. skew(x, y) 보다는 skewX(x)나 skewY(y)를 더 흔히 사용한다.

3D 변환 함수

• translateZ(z) : z축으로 이동. 자주 사용하지 않는다! x y z를 한번에 translate3d(x, y, z)와 같이 사용하기도 한다.
• rotateX(x) : x축을 기준으로 회전. rotateY(y)는 y축을 기준으로 회전한다. 2D rotate 함수와의 차이를 아래에서 그림으로 알아보자.
• perspective(n) : 원근법 지정 함수. 제일 앞에 작성해야 한다!!

요소에 rotateX(45deg) 값을 준 상태이다. X축을 기준으로 45도 회전했는데 입체감이 잘 느껴지지 않는다.

아래 그림은 perspective(150px) 값을 추가해준 상태이다. 이처럼 원근감을 주면 입체적으로 잘 느낄 수 있다.

 

 

• perspective : 하위 요소를 관찰하는 원근 거리를 지정. 앞서 설명한 perspective는 transfrom의 함수이고, 이거는 css의 속성이다!! 적용 대상이 함수 perspective는 관찰 대상이고, 속성 perspective는 관찰 대상의 부모라는 차이점이 있다.
• backface-visibility : 3D 변환으로 회전된 요소의 뒷면 숨김 여부. 기본값은 뒷면이 보이는 visible이고 뒷면을 숨기는 hidden 값을 줄 수 있다.

예를 들어 아래와 같이 요소에 rotateY(180deg) 값을 줘서 반대로 뒤집었을 때,

hidden 값을 주면 뒷면이 보여지지 않는다.

---

20일차 ~.~

 

※ 본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

https://bit.ly/3FVdhDa