12-7 CSS 속성 - 변환

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
           : 기본값            : 일반            : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

※ 변환

 

 

• transform

      → 요소의 변환효과

      → transform : 변환함수1 변환함수2 변환함수3 ...;

      → transform : 원근법 이동 크기 회전 기울임;

 

• 2D 변환 함수

      →  translate  : 이동(x축, y축) - 단위 px

      →  translateX(x)  : 이동(x축) - 단위 px

      →  translateY(y)  : 이동(y축) - 단위 px

      →  scale(x,y)  : 크기(x축, y축) - 단위 없음(배수)  => 하나만 넣으면 x, y 둘다 적용

      →  scaleX(x)  : 크기(x축) - 단위 없음(배수)

      →  scaleY(y)  : 크기(y축) - 단위 없음(배수)

      →  rotate(degree)  : 회전(각도) - 단위 deg

      →  skew(x,y)  : 기울임(x축, y축) - 단위 deg

      →  skewX(x)  : 기울임(x축) - 단위 deg

      →  skewY(y)  : 기울임(y축) - 단위 deg

 

• 3D 변환 함수

      →  translateZ(z)  : 이동(z축) - 단위 px

      →  translate3d(x, y, z)  : 이동(x축, y축, z축) - 단위 px

      →  scaleZ(z)  : 크기(z축) - 단위 없음(배수)

      →  scale3d(x, y, z)  : 크기(x축, y축, z축) - 단위 없음(배수)

      →  perspective(n)  : 원근법(거리) - 단위 px ※ 원근법 함수는 함수 제일 앞에 작성해야합니다!!

      →  rotateX(x)  : 회전(x축) - 단위 deg

      →  rotateY(y)  : 회전(y축) - 단위 deg

      →  rotateZ(z)  : 회전(z축) - 단위 deg

      →  rotate3d(x, y, z, a)  : 회전(x축, y축, z축, 각도) - 단위 deg

 

 

• transition-duration

      → 전환 효과의 지속시간을 지정

      →  0s  : 전환 효과없음

      →  시간  : 지속시간(s)을 지정

 

• perspective(속성)

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

      →  단위  : px 등 단위로 지정

 

• 차이점

 

속성 / 함수	적용대상	기준점 설정
perspective : 600px;	관찰 대상의 부모	perspective-origin
transform: perspective(600px)	관찰 대상	transform-origin

 

• backface-visibility

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

      →  visible  : 뒷면보임

      →  hidden  : 뒷면 숨김