CSS 속성(transform, transform-origin)

transform 속성

• skew(deg): 기울기
• rotate(deg): 회전(시계 방향)

      rotate x축 회전: x축이 회전

      rotate y축 회전: y축이 회전

      rotate 회전: 평면 회전

• scale: 확대
• translate(px): 이동(위에서 아래로)

      translate z축 이동: 뒤로 이동(요소가 작아지는 것처럼 보임)

      #  tramsform 속성은 inline요소에 적용되지 않음.

          inline요소에 transform속성을 적요하고 싶다면 inline-block(display속성)요소로 변경하고 사용해야 함.

 

 

 

transform-origin 속성

: transform 속성과 함께 사용되는 속성, 회전 중심(원점·기준점)을 지정

#  속성 값은 백분율(%)과 키워드 중 하나로 지정할 수 있음

백분율(%)	대응 가능한 키워드
0%	left
0%	top
50%	center
100%	right
100%	bottom

div {
   width: 100px;
   height: 100px;
   background-color:blue;
   transform-origin: 0%(top) 0%(left);
   transform:rotate(45deg);
}

▼▼▼

결과