[Css] - Transformation , 트랜스폼

Transform

웹 요소의 위치를 이동시키거나 크기 조절 및 회전시킬수 있는 강력한 기능

3d 처럼 표현가능

적용시켜도 박스 요소가 변형되지않는데 일종의 3d transformation 이기 떄문이다

트랜스폼을 적용시켜도 다른 요소에는 영향을 끼치지않는다

웹사이트의 특정영역에서 오브젝트의 각도를 튼다거나 , 크기조절을 한다거나 , 위치변경을 한다는 등 속성을 변경하는 속성

  img {
        border: 1px solid black;
        transition: all 2s ease-in-out;
      }
  img:hover {
        transform: scale(0.5) rotateZ(90deg);
        border-radius: 50%;
      }

​

 

<style>
    .transition {
        transform: rotate(45deg);            /* 회전 */
        transform: scale(2,3);               /* 확대 축소 */ 
        transform: skew(10deg, 20deg);       /* 각도 변경 */ 
        transform: translate(100px, 200px);  /* 위치 변경 */ 
    }
</style>

rotate, scale

• rotate(45deg) : 입력한 각도만큼 회전. 음수도 입력 가능
• scale(2,3) : 숫자는 비율을 의미 . width를 2배, height를 3배 확대

skew , translate

• skew(10deg, 20deg) : x축, y축을 기준으로 입력한 각도만큼 비틂
• translate(100px, 200px) : 선택한 오브젝트의 좌표변경

prefix 접두사

다른 버전의 브라우저에서의 실행을 원할 경우

transform 자체가 css3 최신언어라

ie 하위버전에서는 사용을 할수가 없어서 단독으로 사용할수가 없어서

다른 하위 버전의 브라우저에서의 실행을 원할 경우 앞에 prefix 접두사를 붙임.

<style>
    .transition {
        -webkit-transform: translate(100px, 200px);   /* 크롬 , 사파리 */
        -moz-transform: translate(100px, 200px);      /* 파이어폭스 */  
        -ms-transform: translate(100px, 200px);       /* 익스플로러 9.0 */
        -o-transform: translate(100px, 200px);        /* 오페라 */ 
    }    
</style>

 

 

 

! 출처 - 노마드코더 코코아톡 클론코딩 css 이론 파트