CSS3 Animation Part.3(학습 37일차 TIL)

210729 animation을 어제보다 더 깊이 있게 배웠다.
정규시간 이외에는 과거에 만들었던 웹 사이트를 처음부터 새롭게 퍼블리싱 해보는 시간을 가졌다.

Must Remember

• position:absolute;시에 개체를 정 중앙에 위치시키는 3가지 방법
  • left:calc(50% - 가로 1/2px); top:calc(50% - 세로 1/2px);
  • left,top:50%; margin-left,top:-가로,세로 1/2px;
  • transform:translate3d(-50%, -50%, 0);

• transform은 속성 순서에 따라 다르게 보여지니 명심하자.
• animation을 translate로 움직이게 하려면 처음에 중앙으로 위치를 잡을때
  translate를 쓰면 안 됨.
• border 50%로 원을 만들고 border-top: 0; 이런식으로 하면 모양이 변형되므로 아래와 같이 작성한다.

border: 6px solid #000;
border-top-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
/* 각 각 방향의 color를 투명으로... */

그러면 위와 같이 웃는 모양을 구현할 수 있다.

• border-radius: top-left-x top-right-x bottom-right-x bottom-left-x / top-left-y top-right-y bottom-right-y bottom-left-y로 모양을 만들 수 있다.