HTML / CSS - 고급 6편

* CSS 3D animation : 종이처럼 뒤집히는 프로필사진 만들기

조건 : 이미지에 마우스 오버 시 작동

html

<div class="flip-outer">
  <div class="flip-inner">
    <img src="./image/profile.png" class="front">
    <div class="back">
      <div>
        <h4 style="font-size: 25px; margin-bottom: 20px;">개발자 R0ZES</h4>
        <p>Frontend Developer</p>
      </div>
    </div>
  </div>
</div>

css

.flip-outer {
  width: 300px;
  height: 300px;
}
.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
}
.front {
  width: 100%;
  position: absolute;
  z-index: 1;
  backface-visibility: hidden; // HTML에 뒷면에 그림자가 안보이게 처리해주는 코드
}
.back {
  width: 100%;
  position: absolute;
  transform: rotateY(180deg);
}
.back > div {
    position: absolute;
    left: 25%;
    top: 25%;
    text-align: center;
    margin-top: 40px;
}
.back > div * {
    color: white;
}

* 애니메이션

Y축으로 180도(반바퀴) 회전

.flip-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transition: all 1s;
  transform-style: preserve-3d;
}
.flip-inner:hover {
  transform: rotateY(180deg);
}