CSS 변환 transform

김규리·2021년 5월 26일
0

front-end

목록 보기
15/16

CSS 변환 transform

요소의 변환 효과

  • transform: 변환함수1 변환함수2 변환함수3 ...;
  • transform: 원근법 이동 크기 회전 기울임;

2D 변환 함수

px 단위

  • translate(x, y) : 이동(x축, y축)
  • translateX(x) : 이동(x축)
  • translateY(y) : 이동(y축)
  • scale(x, y) : 크기(x축, y축)

deg 단위

  • rotate(degree) : 회전(각도)
  • skewX(x) : 기울기(x축)
  • skewY(y) : 기울기(y축)

3D 변환 함수

px 단위

  • perspective(n) : 원근법(거리)
    • transform: perspective(500px) rotateX(45deg);
    • 원근법 함수는 제일 앞에 작성해야 함.
    • 물체가 훨씬 입체적으로 표현됨

deg 단위

  • rotateX(x) : 회전(x축)
  • rotateY(y) : 회전(y축)

perspective

하위 요소를 관찰하는 원근 거리를 지정

단위 : px 등 단위로 지정

perspective 속성과 함수 차이점

perspective: 600px;

  • 적용 대상 : 관찰 대상의 부모
  • 기준점 설정 : perspective-origin
  • 부모 css에 작성해줌
  • 선호되는 방식

transfrom: perspective(600px)

  • 적용 대상 : 관찰 대상 자체
  • 기준점 설정 : transform-origin

backface-visibility

3D 변환으로 회전된 요소의 뒷면 숨김 여부

기본값, visible : 뒷면 보임

hidden : 뒷면 숨김

0개의 댓글