HTML5 - 190623 Basic Study 55(Transform 3차원)

1. transform 3차원

translate3d(translateX, translateY, translateZ) : 특정한 크기만큼 이동

translateX(translateX) : X축으로 특정한 크기만큼 이동

translateY(translateY) : Y축으로 특정한 크기만큼 이동

translateZ(translateZ) : Z축으로 특정한 크기만큼 이동

scale3d(scaleX, scaleY, scaleZ) : 특정한 크기만큼 확대 및 축소

scaleX(scaleX) : X축으로 특정한 크기만큼 확대 및 축소

scaleY(scaleY) : Y축으로 특정한 크기만큼 확대 및 축소

scaleZ(scaleZ) : Z축으로 특정한 크기만큼 확대 및 축소

rotate3d(angleX, angleY, angleZ) : 특정한 각도만큼 회전

rotateX(angleX) : X축으로 특정한 각도만큼 회전

rotateY(angleY) : Y축으로 특정한 각도만큼 회전

rotateZ(angleZ) : Z축으로 특정한 각도만큼 회전

 

2. transform-style

flat : 후손의 3차원 속성을 무시

preserve-3d : 후손의 3차원 속성을 유지

 

3. backface-visibility

visible : 후면을 보이게 만듬

hidden : 후면을 보이지 않게 만듬

 

4. 원근법

prspective : 원근감 조정(큰 값을 입력할 수록 Z축으로 픽셀이 응집)