DevSSOM

Transform & Animation .box1 { animation: rotation 1500ms linear infinite alternate; } @keyframes rotation { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } } box1 이라고 하는 영역에 애니메이션 속성을 입력함. 속성값들을 한 줄로 입력했는데, 각각의 순서는 상관없지만 항상 먼저 나오는 숫자가 duration이고, 나중에 나오는 숫자가 delay라는 것만 알면 됨. 위에서는 rotation이라고 하는 애니메이션 이름을 지정하고, duration은 1500ms라고 해서 (1000ms = 1초) 1.5초 동안 동작하게, linear로 일정한 속도를..

Transform 웹사이트의 특정 영역에서 어떤 오브젝트의 각도를 튼다거나, 크기를 조절한다거나, 위치를 변경할 때 사용하는 속성. transform에는 다양한 속성값들이 있음. rotate, scale rotate는 입력한 각도만큼 특정 오브젝트에 회전 효과를 줄 때 사용함. 여기서 얘기하는 회전이란, 평면적인 회전을 의미함. 위에서는 45deg로 양수 형태로 값이 들어가있는데, -45deg 처럼 음수 형태로도 입력 가능함. scale은 오브젝트를 확대, 축소시킬 때 사용함. 예시 scale(2, 3)에서 괄호 안의 숫자는 비율을 의미. 2는 width값을 2배, 3은 height값을 3배 확대하겠다는 것. 축소시키고 싶을 때는, 0.5 처럼 소수점을 사용해서 입력하면 됨. scale에서 기준점은, 기..