transform_TIL

transForm

요소를 회전하거나 확대/축소/비틀기등 형태를 변형할 수 있다

transForm: rotate

transform: rotate( angle )
transform: rotateX( angle )
transform: rotateY( angle )

• angle에는 각의 크기를 입력
• 단위는 deg, rad, grad, turn 등
• turn은 1회전, 즉 360deg를 의미
• 각이 음수면 반시계 방향으로 회전 (-45deg)
• 각을 크게하여 돌게하는 효과를 줄 수 있다(720deg)

마우스를 올렸을 때 회전하기

:hover{
	transform: rotate(45deg);
    }

transForm: translate

요소를 이동시키기

• X: 오른쪽으로 이동
  길이단위를 음수로 지정하면 왼쪽으로 이동
  transform: translateX( 50px )
• Y: 아래쪽으로 이동
  길이단위를 음수로 지정하면 위쪽으로 이동
  transform: translateY( 50px )
• 오늘쪽, 아래쪽
  transform: translate( 50px, 50% )