| 변환함수 | 설명 |
| translate3d(translateX, translateY, translateZ) | 특정 크기만큼 이동함 |
| translateX(translateX) | X축으로 특정 크기만큼 이동함 |
| translateY(translateY) | Y축으로 특정 크기만큼 이동함 |
| translateZ(translateZ) | Z축으로 특정 크기만큼 이동함 |
| scale3d(scaleX,scaleY,scaleZ) | 특정크기 만큼 확대 및 축소함 |
| scaleX(scaleX) | X축으로 특정 크기만큼 확대 및 축소함 |
| scaleY(scaleY) | Y축으로 특정 크기만큼 확대 및 축소함 |
| scaleZ(sclaeZ) | Z축으로 특정 크기만큼 확대 및 축소함 |
| rotate3d(angleX, angleY, angleZ) | 특정 각도만큼 회전 |
| rotateX(angleX) | X축으로 특정 각도만큼 회전 |
| rotateY(angleY) | Y축으로 특정 각도만큼 회전 |
| rotateZ(angleZ) | Z축으로 특정 각도만큼 회전 |
ex) transform-style 속성을 사용하는 예시
See the Pen by yeojinho (@yeojinho) on CodePen.
▶ transform-style 속성 사용 가능 키워드
| keword | explain |
| flat | 후손의 3차원 속성 무시 |
| preserve-3d | 후손의 3차원 속성 유지 |
▶ backface-visibility 속성
| keword | explain |
| visible | 후면을 보이게 만듬 |
| hidden | 후면을 보이지 않게 만듬 |
▶ 속성이 적용된 예시
'지토의 개발일기 > html + CSS' 카테고리의 다른 글
| [HTML+CSS] 2차원 변환 (0) | 2021.10.05 |
|---|---|
| [HTML+CSS] 키 프레임과 애니메이션 속성 (0) | 2021.10.05 |
| [HTML+CSS] 애니메이션 (변형 속성) (0) | 2021.10.01 |
| [HTML+CSS] text-shadow 속성 (0) | 2021.10.01 |
| [HTML+CSS] overflow 속성 , float속성 (0) | 2021.10.01 |