종이처럼 뒤집히는 프로필 질문

[권승우]

강의에 나와있는대로 transform-style: preserve-3d; 를 줘도 글씨가 그대로 앞뒷면에 다 나오는데 왜 그런지 잘 모르겠어서요.

그래서 z index 1 을 ,front에 주니까 아예 글씨가 사라지네요. 아마도 제가 생각하기로는 이미지가 아예 앞으로 나와서 먹어버린 것 같습니다

css코드입니다

.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{
    width: 100%;
    position: absolute;
}
.back{
    position: absolute;
    text-align: center;
    width: 100%;
    transform: rotateY(180deg);

}

html 코드입니다.

    <div class="flip-outer">
        <div class="flip-inner">
            < img src="./img/profile.png" class="front">
            <div class="back">
                <h4>개발자 권승우</h4>
                <p>Frontend Developer</p>
            </div>
        </div>
    </div>
혹시 무슨 문제가 있는 것 일까요?

[codingapple]

뒷면 안보이게하려면 backface-visibility: hidden; 추가합시다

[권승우]

감사합니다. 앞면 뒷면으로 만드는건 z index와 back-visibility:hidden으로 해결했습니다.

혹시 강좌의 중간 과정인

앞 뒷면 모두 이미지가 보이지만 글씨를 뒷면에서만 보일 수 있게 만들기가 안되서요. 그걸 해보고싶은데 어떻게 하는지 알 수 있을까요?

현재 앞면 뒷면이 이렇게 나오고 이미지에 z inedex를 주게 된다면 backface-visibility: hidden;를 사용하기 전 까지는 글씨가 아예 안보이게 되어버려서요.

감사합니다

[codingapple]

.back 에만 backface-visibility: hidden 줘봅시다

[권승우]

.back에만 backface-visibility:hidden을 해봤는데, 뒷면이 아닌 앞면에서 글씨가 보이는데 이것을 뒷면으로 나오게하는방법이 있을까요?

z index를 써보았는데 그러면 앞뒷면 양쪽에서 보이지가 않습니다.

[codingapple]

위에 코드 복붙해서 .back 에만 backface-visibility: hidden 주니까 의도대로 잘되는듯요

[권승우]

앗 고쳤습니다 감사합니다. 혹시 다른 질문을 해도 괜찮을까요?

위의 코드에서 .back 에 rotateY(180deg)여부에 따라서 텍스트가 사용할 시에 뒷면, 사용을 안할시에는 앞면에만 보이게 되는데

 혹시 이유가 뭔지 알 수 있을까요?

[codingapple]

180도 뒤집어놓으면 뒤로보낼 수 있어서 그런가봅니다

[글쓴이]

글