CSS로 3D hover 효과를 구현해보자!

3D 이펙트 오버 효과!

이야 오늘 정말 괜찮은 애니메이션이 올라온거 같아요
마우스를 오버했을때 3D 효과를 주는듯한 오버 효과인데
이번 시간에 한번 배워보도록 하겠습니다 가~~~~~~~~~~~~~~~~~~~~~~~보자고 ♪ ( - ࿀ - و(و "

---

HTML 코드 :

이번 예제는 각각 왼쪽 오른쪽 사진에 오버했을때 앞뒷면을 다른 사진으로 구성하는것이 특징인데
그러기 위해서는 하단과 같이 작성하여 [front/back]각각의 사진을 img태그를 사용하여 넣어줍시다!

<div class="hover__wrap">
    <div class="hover__updown">
      <figure class="front">
        <img src="https://kimsangjunv1.github.io/coding/site/site2/assets/img/rotate_dog_01.jpg" alt="">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 올리면 UP 💙</p>
        </figcaption>
      </figure>
      <figure class="back">
        <img src="https://kimsangjunv1.github.io/coding/site/site2/assets/img/rotate_dog_02.jpg" alt="">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 내리면 DOWN 👇</p>
        </figcaption>
      </figure>
    </div>
    <div class="hover__leftright">
      <figure class="front">
        <img src="https://kimsangjunv1.github.io/coding/site/site2/assets/img/rotate_dog_03.jpg" alt="">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 올리면 RIGHT 👉</p>
        </figcaption>
      </figure>
      <figure class="back">
        <img src="https://kimsangjunv1.github.io/coding/site/site2/assets/img/rotate_dog_04.jpg" alt="">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
          <p>마우스 내리면 LEFT 👈</p>
        </figcaption>
      </figure>
    </div>
  </div>

---

CSS 코드 : SCSS를 사용

제일 핵심이 되는 부분은 CSS 코드 부분인데 이 중 가장 핵심은
1. .front 클래스를 가진 요소는 'transform-style'을 'preserve-3d'로 설정해 가상공간을 설정해줍니다.
2. 원근감 효과를 위해 각 div는 'perspertive' 를 1000px로 설정해 원근감 효과를 극대화 시킵니다.
3. 각 이미지는 front/back 클래스를 가진 요소에게 rotate[X/Y]를 설정해 오버시 돌아가는듯한 효과를 주며 뒷 이미지를 보여주게 합니다.

@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%, #483D8B 40%, #9370DB 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: 10px solid #f0f8ff;
  box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
  vertical-align: top;
  box-sizing: border-box;
}

.hover__wrap > div .front {
  transition: transform 1s;
  backface-visibility: hidden;
  transform-style : preserve-3d;
}
.hover__wrap > div .back {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 1s;
  z-index: -1;
  transform-style : preserve-3d;
}
.hover__wrap > div figcaption {
  background: rgba(255,255,255,0.4);
  border: 1px solid #fff;
  color: #000;
  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;
}

/* 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);
}

/* mouse hover effect */
.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);
}

---

완성~~~~~~~~~

무~~~야~~호 드디어 완성되었습니다 너무 멋진 예제라 눈물이 찔끔 나와버렸네요
본 효과를 잘 이용한다면 멋진 디자인으로 구성 가능할것같아요 그렇다면 저는 20000 |･ω･`*)ッ