[CSS] transform에 대해서

Transform

2D변환 함수

• translateX : X축을 기준으로 지정한 값만큼 이동한다. (%, px ,vh 등)
• translateY :위와 동일
• translate : X ,Y를 동시 이용가능
• scale : 크기 조절가능 
  • scale(x,y) , scaleX(), scaleY() 등이 있다.
• rotate : 방향전환 (단위 : deg)
• skew : 기울임
  • skew(x, y) , skewX(), skewY() 등이 있다.

3D 변환 함수

• translateZ(z) : Z축 이동
• translate3d(x,y,z)  x, y ,z 축 이동
• scaleZ(z) : z축의 크기
  • sclae3D(x,y,z)
• rotateZ(z) : z축의 방향전환
  • rotate3d(x,y,z,a) x,y,z축 +  각도
• perspective(n) 원근법(거리),  단위 px

그 외

backface-visibility

• visible (기본값) : 뒷면이 보인다.
• hidden : 뒷면이 보이지 않는다.

 

See the Pen Untitled by J-Plum (@J-Plum) on CodePen.

6번과 7번을 보자면 backface-visibility의 기본값인 visible인 경우 뒷면이 보이지만.

7번의 경우 backface-visibility : hidden을 사용시 뒷면이 보이지 않습니다.