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축) */
scale(배수)       /* 크기(x축, y축) */

/* 단위 deg */
rotate(degree)   /* 회전(각도)     */
skewX(x)         /* 기울임(x축)    */
skewY(y)         /* 기울임(y축     */

 

3D 변환 함수

 

/* 단위 deg */
rotateX(x) /* 회전(x축) */
rotateY(y) /* 회전(y축) */

/* 단위 px */
perspective(n) /* 원근법(거리), 원근법 함수는 제일 앞에 작성 */

 

perspective

 

perspective: 값;

perspective: 10px;

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

 

단위 - px 등 단위로 지정

 

perspective 속성과 함수의 차이점

perspective 속성 
- perspective: 400px;
- 적용대상은 관찰 대상의 부모
- 기준점 설정(perpective-origin)

perspective 함수
- transform: perspective(400px);
- 적용대상은 관찰 대상
- 기준점 설정(transform-origin)

 

backface-visibility

 

backface-visibility: 값;

backface-visibility: visible;
backface-visibility: hidden;

3D 변환으로 회전된 요소의 뒷면 숨김 여부를 지정하는 속성

 

기본값(visible) - 뒷면 보임

hidden - 뒷면 숨김