[포스코x코딩온] 웹개발자 입문 과정 2주차 회고-02 | CSS Transform

1. transform: 요소의 변환 효과 지정

  - 사용 방법: transform: 원근법 이동 크기 회전 기울임 순

 

2. 2D 변환 함수

* px로 지정

  -  transform: translate(x,y) - 이동(x축, y축)

  -  transform: translateX(x) - 이동(x축)

  -  transform: translateY(y) - 이동(y축)

* 없음(배수)

  -  transform: scale(x,y) - 크기(x축, y축)

  -  (transform: scale(x) - 크기(x축))

  -  (transform: scale(y) - 크기(y축))

* deg

  -  transform: rotate(degree) - 회전(각도)

  -  (transform: skew(x,y) - 기울임(x축, y축))

  -  transform: skew(x) - 기울임(x축)

  -  transform: skew(y) - 기울임(y축)

 

(transform: matrix(n,n,n,n,n,n) - 2차원 변환 효과)

 

3. 3D 변환 함수

* px로 지정

  -  (transform: translateZ(z) - 이동(z축))

  -  (transform: translate3d(x,y,z) - 이동(x축,y축,z축))

  -  transform: perspective(n) - 원근법(거리) / 제일 앞에 작성

 

* 없음(배수)

  -  (transform: scaleZ(z) - 크기(z축))

  -  (transform: scale3d(x,y,z) - 크기x축,y축,z축))

 

* deg

  -  transform: rotateX(x) - 회전(x축)

  -  transform: rotateY(y) - 회전(y축)

  - (transform: rotateZ(z) - 회전(z축))

  - (transform: rotate3d(x,y,z,a) - 회전(x축,y축,z축, 각도))

 

(transform: matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) - 2차원 변환 효과)

 

 

4. backface-visibility: 뒷면 숨김 여부

  -  backface-visibility: visible - 뒷면 보임

  -  backface-visibility: hidden - 뒷면 숨김