CSS 3D animation 질문입니다.

[빡대가리1]

CSS 부분에 transform-style: preserve-3d; 를 사용했는데
자꾸 이미지 뒷면(class="back")이 나와서 잘 안먹힙니다.

코드상으로 문제가 없어보이는데 왜이런건가요?

[codingapple]

전체 코드를 올려주십시오 

[빡대가리1]

선생님 이게 제 개인 포트폴리오라서 전체공개하기가 좀 그렇습니다... 공개적으로 올리는게 좀 쪽팔려서요..

포트폴리오도 같이 봐주신다면 보내드리겠습니다.

다만 좀 이상함을 느끼는게,  (아래 사진을 봐주세요) 

 

제 데스크탑이랑 노트북, 핸드폰으로 보았을때 데스크탑만 저렇게 transform-style: preserve-3d;가 먹히지 않은 모습을 보입니다.

디바이스 문제일까요? 둘다 똑같은 크롬브라우저로 열은겁니다.

반응형이기때문에 transform-style: preserve-3d; 가 두번 들어간것도 있는데, 이게 문제가 될까요? 

[codingapple]

overflow, filter, opacity 이런게 있으면 잘 안될 수도 있습니다 

크롬버전이 똑같다면 반응형 css 문제일 수도 있겠군요 

[빡대가리1]

선생님..! 혹시나해서 데스크탑이랑 노트북 둘다 크롬버젼을 확인해 보았습니다!

크롬 버전이 문제인것 같아요.

데스크탑은 최신 버전인 98.0.4758.81(공식 빌드) (64비트) , 노트북은 한단계 전인 97.~~~~ 였습니다.

노트북으로 크롬정보 확인하는데 갑자기 크롬 업데이트 되더니 데스크탑이랑 똑같이 버젼되고 이후 작동이 되지 않네요..^^..

이걸 어떻게 해야할까요..? ㅠㅠ 저 기능이 제 포폴에서 좀 중요한 요소인데 버리기가 좀 그렇습니다 ㅠㅠ 

[빡대가리1]

예시로 선생님이 알려주신 프로필 예제로 테스트 해봤는데 똑같이 이렇게 보입니다...

예제에는 overflow, filter, opacity 이 세가지는 없이 똑같이 했습ㄴㅣ다 ㅠㅠ

<style>
.flip_outer{
width: 300px;
height: 300px;
}
.flip_inner{
width: 100%;
height: 100%;
position: relative;
transition: 1s;
transform-style: preserve-3d;
}
.flip_inner:hover{
transform: rotateY(180deg);
}
.flip_inner img{
position: absolute;
width: 100%;
height: 100%;
}
.front{
backface-visibility: hidden;
}
.back{
transform: rotateY(180deg);
}
</style>

<div class="flip_outer">
<div class="flip_inner">
< img src="profile.png" alt="" class="front" (이미지front) >
< img src="profile2.png" alt="" class="back" (이미지back) >

</div>
</div>

[codingapple]

.front에 z-index를 2로 줘봅시다 

[빡대가리1]

선생님 해결은 되었습니다만 transform-style: preserve-3d; 는 결국 안먹히게 되는 셈인가요? ㅠㅠ 

[codingapple]

그거 주면 3d로 잘 보이는데 앞뒷면 순서지정을 z-index로 해줘야 잘보이는듯요 

크롬 98버전인가부터 perspective(none)이 추가되는데 그거때문일수도 있습니다 

 

[빡대가리1]

그렇군요... 감사합니다 ㅠㅜ

[글쓴이]

글