-
강의 코드 따라쳐보면서, 해보고 있는데요.
제 크롬 브라우져에서는 transform-style: preserve-3d; 속성이 먹히지를 않습니다.
찾아보니까 버전 문제일 수도 있다고 하는데, 버전은 최신 버전이고 크롬 브라우저 문제인가 싶어서 MS Edge에서도 해봤는데요. 크롬하고 똑같습니다.
결국,
.front {
position: absolute;
width: 100%;backface-visibility: hidden; // =>
z-index: 1; // => 이 2개의 속성 값을 집어넣은 다음에야 문제가 해결됐습니다.
}왜 저는 transform-style: preserve-3d; 속성이 안 먹히나요??
transform-style: preserve-3d; 없이도 뒤집히는 사진이 구현이 가능하다면, transform-style: preserve-3d; 속성은 이제 불필요한 속성이 된건가요??
질문 코드
// CSS
<style>
.flip-outer {
width: 300px;
height: 300px;
}
.flip-inner {
width: 100%;
height: 100%;
position: relative;
transition: all 1s;
transform-style: preserve-3d;
}
.flip-inner:hover {
transform: rotateY(180deg);
}
.front {
position: absolute;
width: 100%;
backface-visibility: hidden;
z-index: 1;
}
.back {
position: absolute;
width: 100%;
text-align: center;
transform: rotateY(180deg);
}
</style>// HTML
<body>
<div class="flip-outer">
<div class="flip-inner">
<div class="back">
<h4>개발자 홍길동</h4>
<p>Front-end Developer</p>
</div>
</div>
</div>
</body>
- 답변은 로그인 후 가능합니다.