고급모듈 마지막강의 중에

z-index : 2 이렇게 바꾸면 마우스를 올렸을때 뒷면의 글씨도 안보이는데 어떻게 해야하나요

뒷면에 z-index를 다르게 주어도 안됩니다.

<div class="flip-outer">
    <div class="flip-inner">
      <img src="profile.png" class="front">
      <div class="back">
        <h4>개발자 김철용</h4>
        <p>Frontend Developer</p>
      </div>
    </div>
 </div>

css

.flip-outer {
  width: 200px;
  height: 200px;
  margin-left: 400px;
}

.flip-inner {
  width: 50%;
  height: 50%;
  position: absolute;
  transition: all 1s;
  transform-style: preserve-3d;
}

.flip-inner:hover {
  transform: rotateY(180deg);
}
.front {
  width: 100%;
  position: absolute;
  z-index: 2;
}

.back {
  width: 100%;
  position: absolute;
  text-align: center;
  transform: rotateY(180deg);
}

이렇게 했습니다.