[애니메이션효과 만들기] 카드 뒤집기 효과 (근데 3D를 곁들인...)

마우스를 오버하면 뒤집히는 효과 만들기

카드에 마우스 오버시 뒤집히는 효과를 만들어 보겠습니다. 그리고 이 효과에 텍스트는 3D효과까지 곁들여 보겠습니다.

---

■ 새로운 것들

perspective: 1000px;

원근감을 부여하는 속성인데요. 2D는 x,y좌표로도 충분히 구현 가능하지만, 3D는 x,y,z로 구현해야 합니다. 그래서 이 속성을 부여하게 되면 z를 컨트롤할 수 있게 됩니다.
숫자가 클 수록 멀리서 보는 느낌이 나고, 작아질 수록 가까이 있는 효과입니다

backface-visibility: hidden;

요소의 뒷면이 보일지 말지 결정하는 속성입니다.

transform-style : preserve-3d;

자식 요소를 3D공간에 배치하게 해줍니다. 기본값은 flat인데 이건 2D의 2차원에서 부모 요소와 동일하게 평면에 배치합니다.

■ HTML

<div class="hover__wrap">
    <div class="hover__updown">
      <figure class="front">
        <img src="https://github.com/Parkhyeonshin/Coding/blob/main/animation/img/hoveani01.jpg?raw=true" alt="hoverUp 이미지">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
      <p>마우스 올리면 Up</p>
        </figcaption>
      </figure>
      <figure class="back">
        <img src="https://parkhyeonshin.github.io/Coding/animation/img/hoveani02.jpg" alt="hoverDown 이미지">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
      <p>마우스 내리면 Down</p>
        </figcaption>
      </figure>
      
    </div>
    <div class="hover__leftright">
      <figure class="front">
        <img src="https://parkhyeonshin.github.io/Coding/animation/img/hoveani04.jpg" alt="hoverLeft 이미지">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
      <p>마우스 올리면 to Right</p>
        </figcaption>
      </figure>
      <figure class="back">
        <img src="https://parkhyeonshin.github.io/Coding/animation/img/hoveani03.jpg" alt="hoverRight 이미지">
        <figcaption>
          <h3>Mouse Hover Effect</h3>
      <p>마우스 내리면 to Left</p>
        </figcaption>
      </figure>
    </div>
  </div>

■ 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(to top, #cfd9df 0%, #e2ebf0 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-sizing: border-box;
	box-shadow: 2px 2px 2px 2px rgba(0,0,0,0.2);
	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;
	text-align: center;
	padding: 10px;
	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);
}

.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);
}

■ 결과