애니메이션
서서히 변화시키는 방법 - transition
transition 트랜지션(transition)은 시간에 따라 웹 요소의 스타일 속성이 조금씩 바뀌는 것을 말합니다. 스타일이 바뀌는 시간을 조절하면 애니메이션 효과도 낼 수 있습니다. CSS3 트랜지션을 실행하기 위해서 다음과 같은 여러 속성…
transform 이동 효과 주는 방법 - translate
transform / translate transform의 translate로 요소를 이동할 수 있습니다. 평면(2D)에서의 이동입니다.
3D 입체 효과 원근감, 거리감 설정하는 방법 - perspective
perspective perspective 속성은 관찰자 시점(위치)의 거리를 지정하여 원근감을 표시합니다. 입체적인 3D 효과를 주기 위해 사용합니다. 기본형 perspective : none | length …
뒷쪽에서 앞면이 보이게 하는 방법 - backface-visibility
backface-visibility backface-visibility는 요소의 뒷쪽에서 앞면이 보이게 할지 정하는 속성입니다. 기본형 backface-visibility : visible | hidden visible : 보…
transform 회전 효과 주는 방법 - rotate
transform / rotate transform의 rotate로 요소를 회전시킬 수 있습니다. 평면(2D)에서의 회전입니다.
transform 확대, 축소 효과 주는 방법 - scale
transform / scale transform의 scale로 요소를 확대 또는 축소할 수 있습니다. 평면(2D)에서의 확대 또는 축소입니다.
transform 비틀기 효과 주는 방법 - skew
transform / skew transform의 skew로 요소를 비틀기 또는 기울이기를 할 수 있습니다. 평면(2D)에서의 이동입니다.
transform 기준점 설정하는 방법 - transform-origin
transform-origin transform-origin은 회전 중심점(원점·기준점)을 지정합니다. transform, transition 속성과 함께 사용되는 속성입니다. 기본형 transform-origin : x-posit…
원근감, 거리감 기준점 설정하는 방법 - perspective-origin
perspective-origin perspective-origin 속성으로 요소와의 원근감(거리감) 기준점을 설정합니다. perspective 속성과 함께 사용합니다.