간단한 애니메이션 05

간단한 애니메이션 05

간단한 애니메이션 만들기 다섯번째 시간입니다.
수업시간에 배운 마우스오버 효과를 이용해서 예제를 만들어보겠습니다.

---

01. HTML

{
    <div class="hover__wrap">
    <div class="hover__updown">
      <figure class=front>
        <img src="https://github.com/kimdaewonn/coding/blob/main/animation/img/Rectangle%201.jpg?raw=true" alt="거북이">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 올리면 Up</p>
        </figcaption>
      </figure>
      <figure class=back>
        <img src="https://github.com/kimdaewonn/coding/blob/main/animation/img/Rectangle%204.jpg?raw=true" alt="여우">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 내리면 Down</p>
        </figcaption>
      </figure>
    </div>
    <div class="hover__leftright">
      <figure class=front>
        <img src="https://github.com/kimdaewonn/coding/blob/main/animation/img/Rectangle%202.jpg?raw=true" alt="햄스터">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 올리면 to Left</p>
        </figcaption>
      </figure>
      <figure class=back>
        <img src="https://github.com/kimdaewonn/coding/blob/main/animation/img/Rectangle%203.jpg?raw=true" alt="표범">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 내리면 to Right</p>
        </figcaption>
      </figure>
    </div>
  </div>
}

---

02. CSS

{
    @font-face {
        font-family: ‘LocusSangsang’;
        font-weight: normal;
        font-style: normal;
        src: url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot’);
        src: url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.eot?#iefix’) format(‘embedded-opentype’),
             url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.woff2’) format(‘woff2’),
             url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.woff’) format(‘woff’),
             url(‘https://cdn.jsdelivr.net/gh/webfontworld/locus/LocusSangsang.ttf’) format(“truetype”);
        font-display: swap;
    }
    body {
      font-family: ‘LocusSangsang’;
      background-image: linear-gradient(135deg, #191970 0%, #483088 40%, #0370DB 100%);
      height: 100vh;
    }
    .hover__wrap {
      display: flex;
      justify-content:center;
      align-items: center;
      height: 100vh;
    }
    .hover__wrap > div  {
      max-width: 400px;
      margin: 3%;
      position: relative;
    /*  원근감을 주는 것  */
      perspective: 1000px;
    }
    .hover__wrap > div img {
      width: 100%;
      border: 5px solid #F0F8FF;
      box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
      box-sizing: border-box;
      vertical-align: top;
    }
    .hover__wrap > div .front {
      transition: transform 1s;
      backface-visibility: hidden;
      transform-style: preserve-3d;
    }
    .hover__wrap > div .back {
      position: absolute;
      left: 0;
      top: 0;
      z-index: -1;
      transition: transform 1s;
      transform-style: preserve-3d;
    }
    .hover__wrap > div figcaption {
      background: rgba(0,0,0,0.4);
      color: #F8F8FF;
      padding: 10px;
      text-align: center;
      line-height: 1.5;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%) translatez(100px);
      width: 60%;
      backface-visibility: hidden;
    }
    .hover__updown {
    }
    .hover__leftright {
    }
    /* mouse hover effect */
    .hover__updown .front {
      transform: rotateX(0deg);
    }
    .hover__updown:hover .front {
      transform: rotateX(180deg);
    }
    .hover__updown .back {
      transform: rotateX(-180deg);
    }
    .hover__updown:hover .back {
      transform: rotateX(0deg);
    }
    .hover__leftright .front {
      transform: rotateY(0deg);
    }
    .hover__leftright:hover .front {
      transform: rotateY(180deg);
    }
    .hover__leftright .back {
      transform: rotateY(-180deg);
    }
    .hover__leftright:hover .back {
      transform: rotateY(0deg);
    }
}

---

03. 결과물