[프론트엔드] 11. 변환

이하나·2022년 2월 24일
0

프론트엔드

목록 보기
14/19

[ 1 ] transform

transform: 변환함수1 변환함수 2 ...;
: 요소의 위치, 크기, 형태 등을 변환
: 원근법, 이동, 크기, 회전, 기울임 ...

1) 변환 함수

(1) translate

: 요소의 위치를 이동
: 단위는 px

  • 2D 변환 함수
    • translate(x,y) : 지정된 만큼 x, y축으로 이동
    • translateX(x) : 지정된 만큼 x축으로 이동
    • translateY(y) : 지정된 만큼 y축으로 이동
  • 3D 변환 함수
    • translateZ(z) : 지정된 만큼 z축으로 이동

(2) scale

: 요소의 크기를 변환
: 단위는 배수

  • 2D 변환 함수
    • scale(x,y) : x, y축으로 지정된 만큼 크기 변환
    • scaleX(x) : x축으로 지정된 만큼 크기 변환
    • scaleY(y) : y축으로 지정된 만큼 크기 변환
  • 3D 변환 함수
    • scale3d(x,y,z) : x, y, z축으로 지정된 만큼 크기 변환
    • scaleZ(z) : z축으로 지정된 만큼 크기 변환

(3) rotate

: 요소를 회전
: 단위는 각도 (deg)

  • 2D 변환 함수
    • rotate(degree) : 지정된 만큼 회전
  • 3D 변환 함수
    • rotateX(x) : x축을 기준으로 지정된 만큼 회전
    • rotateY(y) : y축을 기준으로 지정된 만큼 회전
    • rotateZ(z) : z축을 기준으로 지정된 만큼 회전
    • rotate3d(x,y,z,deg) : x, y, z 값을 가진 여러 축을 지정된 만큼 회전

(4) skew

: 요소의 형태를 기울임
: 단위는 각도 (deg)

  • 2D 변환 함수
    • skew(x,y) : 지정된 만큼 x, y축 방향으로 기울임
    • skewX(x) : 지정된 만큼 x축 방향으로 기울임
    • skewY(y) : 지정된 만큼 y축 방향으로 기울임

(5) perspective

: 하위 요소를 관찰하는 원근 거리를 지정
: 단위는 px
: 단위가 작을 수록 가까움

2) 관련 속성

(1) perspective

: 3D 변환으로 회전되어 보이는 요소의 뒷면 숨김 여부

  • 기본값
    • visible : 뒷면 보임
  • 설정값
    • hidden : 뒷면 숨김
profile
코딩을 배우는 비전공자 코린이!

0개의 댓글