transform 파헤치
Transform: {translate} {scale} {rotate} {skew}
rotate /scale/ skew 의 transform-origin은 center, center (50%, 50%) 이다 !!
translate 에 하나의 요소만 있으면 x축만을 의미한다.
skew또한, x축만 을의미한다. transform:skew(왼쪽으로 기울임+,상-/하+)
rotate는,회전의 각도가 양수이면 시계 방향으로 회전하고 음수이면 시계 반대방향으로 회전한다.
해당축은 고정되어있고, 원하는 각도 만큼 반대 축이 돌아간다고 생각하면 됨.
scale는, y축 확대를 의미한다.
2차원 변환 함수
키워드 이름 | 설명 |
translate(translate X, translate) | 특정 크기만큼 이동합니다. |
translateX(translateX) | X축으로 특정 크기만큼 이동합니다. |
translateY(translateY) | Y축으로 특정 크기만큼 이동합니다. |
scale(scaleX,scaleY) | 특정크기만큼 확대 및 축소합니다. |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소합니다. |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소합니다. |
skew(angleX, angleY) | 특정 각도만큼 기울입니다. |
skewX(angleX) | X축으로 특정각도만큼 기울입니다. |
skewY(angleY) | Y축으로 특정각도만큼 기울입니다. |
rotate(angleZ) | 특정 각도만큼 회전합니다. |
3차원 변환 함수
키워드 이름 | 설명 |
translate3d(translate X, translateY, translateZ) | 특정 크기만큼 이동합니다. |
translateX(translateX) | X축으로 특정 크기만큼 이동합니다. |
translateY(translateY) | Y축으로 특정 크기만큼 이동합니다. |
translateZ(translateZ) | Z축으로 특정 크기만큼 이동합니다. |
scale(scaleX, scaleY, scaleZ) | 특정크기만큼 확대 및 축소합니다. |
scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소합니다. |
scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소합니다. |
scaleZ(scaleZ) | Z축으로 특정 크기만큼 확대 및 축소합니다. |
rotate3d(rotateX, rotateY, rotateZ) | 특정 각도만큼 회전합니다.. |
rotateX(rotateX) | X축으로 특정각도만큼 회전합니다. |
rotateY(rotateY) | Y축으로 특정각도만큼 회전합니다. |
rotateZ(rotateZ) | Z축으로 특정각도만큼 회전합니다. |
'HTML , CSS' 카테고리의 다른 글
| 백그라운드 블렌드 모드 섞는 방법 (0) | 2018.06.11 |
|---|---|
| margin 통합 (0) | 2018.06.11 |
| line-height 속성 (0) | 2018.01.11 |
| overflow 속성 (0) | 2018.01.11 |
| how to use pseudo-class :not with :nth-child (0) | 2018.01.11 |