transform 3d

• transform 속성 : 요소를 변환
 

transform의 값들(함수)

• 기본적으론 부모 요소에 있는 값을 더 우선으로 함

• rotate(각도deg)
• 유체이탈처럼 자신에게 벗어나 회전하는 2차원 변환 함수

• rotateX(각도deg) / rotateY(각도deg)
• x축/y축으로 회전하는 3차원 변환 함수
• 값을 음수로 주면 회전하는 방향을 반대로

• perspective(거리)
• 원근 효과 적용, 튀어나오는 것 같은 효과를 줌
• 3차원 변환 함수에서만 적용됨
• 컨테이너에도 지정 가능

• scale(n)
• 크기 퍼센트(기본값 1)

transform item의 속성

• transform-origin: 해당 아이템이 회전할 축으로 삼을 (아이템의)x, y을 지정
• 기본 값은 50% 50% (정중앙)

• transition-duration: 회전하는데 쓰는 시간

• backface-visibility : 뒷면의 가시성 설정 (기본값은 visible)
• hidden ⇒ 뒷면이 보이지 않게 함

• translate(x값, y값) : 요소 위치를 x값 만큼 수평, y값 만큼 수직 방향로 변경한다
• y값은 선택임
• 값을 퍼센테이지로도 줄 수 있다 ⇒ 요소 길이가 기준

transform 부모 (컨테이너 혹은 item)의 속성

• perspective
• 아이템에 perspective함수를 일일이 안써줘도 원근효과를 적용 가능

• perspective-origin : 요소를 바라보는 축을 지정

• transform-style : preserve-3d ⇒ 자식(후손x) 요소의 transform 효과를 살린다