[CSS] 애니메이션05 : 깐즤나는 입체 효과

CSS : 애니메니션 만들기 : 🕶 입체적인 애니메이션 작업~ 😎 + 마우스 오버 효과 🖱

이번 시간에는 CSS 실습으로 입체적인 애니메이션을 만들어보겠습니다~~! 오늘의 포인트 속성은 바로~~ transform-style: preserve-3d;입니다!

---

#1. HTML

구조를 앞과 뒤가 따로 있다 생각하여 마크업을 해주시면 됩니다.

<div class="hover__wrap">
  <div class="hover__updown">
    <figure class="front">
      <img src="https://user-images.githubusercontent.com/106949433/191177895-3875da4c-06b6-42f8-83cb-b5a7fe7ac88a.jpg" alt="hoverUp 이미지">
      <figcaption>
        <h3>Mouse Hover Effect</h3>
        <p>마우스 올리면 Up</p>
      </figcaption>
    </figure>
    <figure class="back">
      <img src="https://user-images.githubusercontent.com/106949433/191177915-75551c83-9f83-49cc-a1fc-3eff65e014df.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://user-images.githubusercontent.com/106949433/191177923-3b338ef2-50ae-48c3-83d1-827f29e39b99.jpg" alt="hoverLeft 이미지">
      <figcaption>
        <h3>Mouse Hover Effect</h3>
        <p>마우스 올리면 to Right</p>
      </figcaption>
    </figure>
    
    <figure class="back">
      <img src="https://user-images.githubusercontent.com/106949433/191177925-8578bc0b-b09d-4e7c-9b95-21f998b1ae84.jpg" alt="hoverRight 이미지">
      <figcaption>
        <h3>Mouse Hover Effect</h3>
        <p>마우스 내리면 to Left</p>
      </figcaption>
    </figure>
  </div>
</div>

---

#2. CSS

다음은 CSS 코드 입니다!
오늘의 포인트는 transform-style: preserve-3d;와 perspective로 입체적인 효과를 주고 싶을 때 사용하는 속성입니다.
perspective == 원근감을 주는 속성

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

---

#3. 결과보기