CSS transform

CHan·2022년 12월 1일
0
  1. transform

    요소를 회전하거나 확대/축소 또는 기울기를 조절하는 속성이다.
  2. 사용 방법

    2D 변형

    1) transform: rotate(angle);
    	- 요소를 회전시키는 속성
        - deg, rad, grad, turn 등의 단위를 사용한다.
        - turn은 1회전을 의미하며, 360deg(360도)와 같은 효과를 낸다.
        - 값이 양수면 시계 방향, 음수면 반시계 방향이다.
        - rotate X, rotate Y에 값을 넣으면 선택한 축에 따라 회전한다.
        
    2) transform: translate();
    	- 요소를 이동시키는 속성
        - px, %등 css 크기 단위를 사용한다.
        - 값이 양수일 경우 오른쪽(x축)과 아래쪽(y축)으로 이동한다.
        - 값이 음수일 경우 왼쪽(x축)과 위쪽(y축)으로 이동한다.
        - X와 Y의 값(X, Y)을 같이 넣으면 x축과 y축으로 이동한다.
        
    3) transform: scale();
    	- 요소를 확대하거나 축소시키는 속성
        - 1보다 큰 수는 확대, 1보다 작으면 축소시킨다.
        - scaleX, scaleY에 값을 넣으면 선택한 방향에 따라 확대/축소시킨다.
        
    4) transform: skew();
    	- 요소를 기울이는 속성
        - skew X, skew Y에 값을 넣으면 선택한 축에 따라 요소를 기울인다.
        
    5) transform: scale() translate() rotate() skew();
    	- 공백(스페이스)으로 구분지어 여러 속성들을 함께 사용할 수 있다.
        
    6) transform: matrix(n, n, n, n, n, n);
    	- 모든 2D transform 메소드를 한 번에 설정
        
    7) transform-origin: % or keyword;
    	- 요소에 transform을 적용하는 변환 중심을 설정
        - 백분율을 지정하거나 대응 가능한 키워드를 사용하여 값을 설정
          (0% = left or top, 50% = center, 100% = right or bottom)
        

    3D 변형

    1) transform-origin: % or keyword;
    	- 변환을 적용하는 변환 중심 설정
        - 백분율을 지정하거나 대응 가능한 키워드를 사용하여 값을 설정
          (0% = left or top, 50% = center, 100% = right or bottom)
    
    2) transform-style: flat or preserve-3d
    	- 변환이 자식(child) 요소들에게도 적용될지 설정
        - 기본값은 flat으로 자식 요소의 3D 변환을 사용하지 않음
        - preserve-3d; 자식 요소의 3D 변환 사용
        
    3) transform: perspective;
    	- 원근감을 표현할 때 사용할 픽셀 수 설정
        
    4) perspective-origin: % or keyword;
    	- 원근감 표현할 때 사용할 기준 축 설정
        - 백분율을 지정하거나 대응 가능한 키워드를 사용하여 값을 설정 
          (0% = left or top, 50% = center, 100% = right or bottom)
        
    5) backface-visivility: visible or hidden
    	- 요소의 앞면만을 표현(뒷면 표시 안함) 여부를 설정
        - hidden을 설정하면 뒷면 표시를 하지 않는다.
        
    6) transform: rotate3d(x, y, z angle);
    	- 주어진 각도만큼 x, y, z축 기준으로 회전
        
    7) transform: translate3d(x, y, z);
    	- 현재 위치에서 주어진 x, y, z축의 거리만큼 이동
        
    8) transform: scale3d(x, y, z);
    	- 주어진 배율만큼 x, y, z축 방향으로 늘리거나 줄임
        
    9) transform: perspective(n);
    	- 3D 요소에 원근감을 표현할 때 사용할 픽셀 수 결정
        
    10) transform: matrix3d(n x 16);
    	- 4 x 4 행렬을 이용한 16개 매개변수로 모든 3D 변형 메소드를 한 번에 설정
        
    ** perspective 속성과 함수의 차이점
    	* perspective 속성
        	- 적용 대상: 관찰 대상의 부모 요소
            - 관찰 대상이 여럿이면 부모 요소에 속성 사용.
              (관찰 대상이란 원근법을 의미함)
            - 원근법의 기준점을 설정: perspective-origin
        * perspective() 함수
        	- 관찰 대상 자체가 적용 대상
            - 관찰 대상이 하나면 관찰 대상 자체에 함수 사용
            - 관찰하는 기준점 설정 시 transform-origin 사용
            
       !! perspective 속성은 관찰 대상이 여럿이기 때문에 부모/조상 요소에 적용하여
          하위 요소들을 관찰하는 원근거리를 설정
       !! transform: perspective() 변환 함수는 관찰 대상에 직접 적용하여 그 대상을
          관찰하는 원근 거리를 설정
    	
profile
Hello World!

0개의 댓글