6월21일25일차 - transform-origin, two fixed backgrounds

transform-origin을 활용하면 회전 축을 직접 지정할 수 있습니다.

background video를 적용하는 방법도 복습합니다.

[220621-tranform-origin 적용모습] [220621-tranform-origin예시-html]

[220621-fixed background를 활용하여 색상이 차오르는 연출을 합니다.]

한 배경은 grayscale()을 적용하고 다른 배경을 겹치도록 위치하여

스크롤을 내림에 따라 색상이 차오르는 연출이 가능합니다.

---

transform-origin 속성으로 rotate의 기준점을 정할 수 있습니다.
bottom의 center를 기준으로 -30deg 회전시킵니다.
      .container figure img {
        transform-origin: bottom center;
        transform: rotate(0);
        transition: transform 0.5s;
      }
      .container figure:hover img {
        transform-origin: bottom center;
        transform: rotate(-30deg);
      }
      
animation을 적용하면 다양한 효과를 줄 수 있습니다.
      .container figure img {
        transform-origin: bottom center;
      }
      .container figure:hover img {
        animation: lanez 0.5s;
        transform-origin: bottom center;
      }
      @keyframes lanez {
        0% {transform: rotate(0);}
        50% {transform: rotate(-15deg);}
        75% {transform: rotate(5deg);}
        100% {transform: rotate(0);}
      }

 

background에 video를 적용할 수 있습니다.

      <div class="movie_bg">

        <video src="../img/woman_of_the_sea_-_112722 (Original).mp4" autoplay muted playsinline></video>

      </div>