고급모듈 마지막강의 중에

[유용환]

마지막 강의 중에 transform-style: preserve-3d 이것이 있는데 적용을 해도 앞면에 글씨가 보이는데 어떤것이 잘못된건가요

[codingapple]

앞면 이미지를 z-index : 2 이런걸로 좀 앞으로 옮겨봅시다 

[유용환]

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

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

[codingapple]

전체코드를 올려주십시오 

[유용환]

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

 

이렇게 했습니다.

 

[codingapple]

.front에 backface-visibility: hidden; 도 추가합시다 

[글쓴이]

글