transform, transition, animation, media query

애니메이션 샘플 사이트: https://animista.net/

transform

• 트랜스폼은 돔요소가 변형되는 것과는 무관함.
  :트랜스폼은 옆에 다른 요소들에게 영향을 끼치지 않음.
  다른 요소의 블록요소를 변형시키지 않고 원하는 요소를 이동시키기 위해 사용하는 것임.

p {
 transform: rotate(10deg); }

<p>letter letter letter letter</p>

transition

• transition: "속성이" "시간"에 따라 바뀌는 것

• 마우스 올렸을때 그림이 회전하는 예제

  /* 1.transition 예제 */
      #lion {
        border: 1px solid black;
        transition: transform 1s ease-in-out;
      }

      #lion:hover {
        transform: rotateY(180deg);
      }

    <img src="./lion.png" width="100px" id="lion" />

• 마우스 올렸을떄 패딩이 커지고, 배경색이 바뀌는 예제

  /* 2.transition 예제 */
      a {
        padding: 10px;
        border-radius: 20px;
        text-decoration: none;
        font-size: 18px;
        background-color: tomato;
        color: white;
        
        /* 1)bg,color,psdding 다 바꿀때*/
        /* transition: all 1s ease-in-out;*/
        
        /* 2)padding이랑 bg만 지정해서 바꿀때*/
        transition: padding 3s ease-in-out, background-color 1s ease;
      }

      a:hover {
        background-color: white;
        color: tomato;
        padding: 20px 5px;
      }

 <a href="#">go page</a>

animation

• 애니메이션이 두단계 일때(form-to) / 두개 이상의 단계일 때(0% - 50% - 100%)

    /* 3.animation 예제 - transition과 transform 활용 */
      @keyframes rotaAni {
        0% {
          transform: rotateY(0);
          border: 1px solid black;
        }
        
        50% {
          transform: rotateY(180deg) translateX(180px);
          /* opacity: 0; */
          border: 3px solid red;
        }
        
        100% {
          transform: rotateY(0) translateX(0px);
          border: 1px solid black;
        }
      }
      
      #lion2 {
        animation: rotaAni 5s ease-in-out infinite;
      }

	<img src="./lion.png" width="100px" id="lion2" />

media query

• 미디어 타입에 따라 선택적으로 CSS를 적용할 수 있음.

• 가로모드이고, 너비가 아래 조건을 만족할 때 마다 색상이 바뀌게 되는 예제

     div {
        background-color: blue;
        width: 100px;
        height: 100px;
      }

      @media screen and (min-width: 400) and (max-width: 600px) and (orientation: landscape) {
        div {
          background-color: red;
        }
        span {
          display: none;
        }
      }
      
      @media screen and (min-width: 601px) and (max-width: 900px) and (orientation: landscape) {
        div {
          background-color: greenyellow;
        }
        span {
          display: none;
        }
      }
      
      @media screen and (min-width: 901px) and (max-width: 1200px) and (orientation: landscape) {
        div {
          background-color: orange;
        }
        span {
          display: none;
        }
      }

  <div></div>
    <span>Please flip your phone </span>